css动画属性

/* 示例代码：使用 CSS 动画属性创建一个简单的淡入效果 */

/* 定义关键帧动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 应用动画到元素 */
.element {
  animation-name: fadeIn; /* 指定使用的动画名称 */
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟时间 */
  animation-iteration-count: 1; /* 动画播放次数 */
  animation-direction: normal; /* 动画播放方向 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
}

解释说明：

• @keyframes：定义了动画的关键帧，从 opacity: 0（完全透明）到 opacity: 1（完全不透明）。
• animation-name：指定要应用的动画名称，这里为 fadeIn。
• animation-duration：设置动画的持续时间为 2 秒。
• animation-timing-function：定义动画的速度曲线，ease-in 表示动画开始时较慢，逐渐加速。
• animation-delay：设置动画在开始前的延迟时间为 1 秒。
• animation-iteration-count：指定动画播放的次数，1 表示只播放一次。
• animation-direction：设置动画的播放方向，normal 表示正常播放。
• animation-fill-mode：设置动画结束后的状态，forwards 表示动画结束后保持最后一帧的状态。