css 动画

/* 示例代码：使用 CSS 实现一个简单的动画效果 */

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

/* 应用动画到元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: fadeIn;
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟时间 */
  animation-iteration-count: infinite; /* 动画循环次数 */
  animation-direction: alternate; /* 动画播放方向 */
}

解释说明：

• @keyframes：定义了一个名为 fadeIn 的动画，从透明度为 0（完全透明）逐渐变为透明度为 1（完全不透明）。
• .box：选择器定义了一个红色的方块，并应用了 fadeIn 动画。
• animation-duration：设置动画持续时间为 2 秒。
• animation-timing-function：设置动画的速度曲线为 ease-in，即动画开始时较慢，逐渐加速。
• animation-delay：设置动画在 1 秒后开始。
• animation-iteration-count：设置动画无限循环。
• animation-direction：设置动画每次循环时反向播放。