动画css

/* 动画 CSS 示例 */

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

/* 应用动画到元素 */
animated-element {
  animation-name: fadeIn;
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
  animation-direction: alternate; /* 动画播放方向 */
}

/* 解释说明：
1. @keyframes 定义了名为 'fadeIn' 的动画，从透明度为 0 到透明度为 1。
2. animated-element 是应用动画的元素选择器。
3. animation-name 指定要使用的动画名称。
4. animation-duration 设置动画的持续时间。
5. animation-timing-function 设置动画的速度曲线。
6. animation-delay 设置动画开始前的延迟时间。
7. animation-iteration-count 设置动画的重复次数。
8. animation-direction 设置动画的播放方向。 */