在 CSS 中,你可以使用 @keyframes 规则和 animation 属性创建动画效果。以下是一个简单的示例,演示了如何使用 CSS 动画:
/* 定义动画关键帧 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 应用动画到元素 */
.slide-in {
  animation: slideIn 1s ease-in-out;
}

/* 也可以使用 animation 属性的详细写法 */
/*
.slide-in {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
*/

在上面的示例中,我们创建了一个名为 slideIn 的动画关键帧,定义了元素从左侧滑入的效果。然后,我们使用 .slide-in 类来应用这个动画。

动画属性解释:

  •  animation-name: 指定要应用的动画名称。

  •  animation-duration: 动画持续时间。

  •  animation-timing-function: 动画的时间函数(控制动画速度曲线)。

  •  animation-delay: 动画延迟时间。

  •  animation-iteration-count: 动画播放次数,可以是具体次数或 infinite。

  •  animation-direction: 动画播放方向(normal, reverse, alternate, alternate-reverse 等)。

  •  animation-fill-mode: 动画执行前和执行后如何应用样式(forwards, backwards, both, none)。

  •  animation-play-state: 控制动画的播放状态(running, paused)。


这只是 CSS 动画的基础,你可以通过组合关键帧、调整动画属性等方式创建更加复杂和多样化的动画效果。同时,CSS 动画也可以与 JavaScript 结合使用,以实现更高级的交互效果。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12587/CSS