[CSS]CSS3 动画

CSS3 动画可以使用 @keyframes 规则来创建。以下是一个简单的例子，演示了如何创建一个简单的淡入动画：




/* 定义关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画到元素 */
.element {
  animation-name: fadeIn; /* 指定使用的关键帧名称 */
  animation-duration: 2s; /* 动画时长 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的样式 */
}

HTML 部分：




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

上述代码定义了一个名为 fadeIn 的关键帧动画，它将元素从完全透明 (opacity: 0) 渐变至完全不透明 (opacity: 1)。然后，将这个动画应用到拥有 element 类的 HTML 元素上。

评论已关闭

推荐阅读