css常见动画

CSS常见的动画主要通过@keyframes规则和animation属性组合使用来实现。

以下是一个简单的例子，展示了如何使用CSS动画来创建一个简单的淡入效果：




/* 定义关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画到元素 */
.element {
  animation: fadeIn 1s ease-in-out forwards;
}

HTML部分：




<div class="element">我是一个淡入动画的例子</div>

在这个例子中，.element将在1秒内从完全透明（opacity: 0）渐变至完全不透明（opacity: 1），并且动画在结束后会保持最后的状态 (forwards)。ease-in-out是动画的缓动函数，它会使动画在开始和结束时慢，中间时快，给用户更流畅的体验。

评论已关闭

推荐阅读