CSS Animations（动画）：介绍与使用

CSS Animations 允许你创建复杂的动画效果，只使用 CSS。以下是一些常用的 Animations 属性及其用法。

@keyframes

介绍

@keyframes 用于定义动画序列。

使用示例

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

说明

这定义了一个名为 "slide" 的动画，从 translateX(0) 移动到 translateX(100px)。

animation-name

介绍

用于指定要应用的 @keyframes 动画名称。

使用示例

div {
  animation-name: slide;
}

说明

这会使 div 元素使用名为 "slide" 的动画。

animation-duration

介绍

定义动画需要多长时间完成。

使用示例

div {
  animation-duration: 2s;
}

说明

这会使 div 元素的动画在 2 秒内完成。

animation-timing-function

介绍

定义动画的时间曲线。

使用示例

div {
  animation-timing-function: ease-in-out;
}

说明

这会使 div 元素的动画以 "ease-in-out" 的方式进行。

animation-iteration-count

介绍

定义动画应该播放多少次。

使用示例

div {
  animation-iteration-count: infinite;
}

说明

这会使 div 元素的动画无限次地播放。

animation-direction

介绍

定义动画是否应该反向播放。

使用示例

div {
  animation-direction: alternate;
}

说明

这会使 div 元素的动画在每次迭代后反向播放。

常用推荐

1. animation-name: slide: 当你需要一个简单的滑动效果时，这是一个好的选择。
2. animation-duration: 2s: 适用于大多数动画，不会太快也不会太慢。
3. animation-iteration-count: infinite: 当你需要一个永不停止的动画时，这是一个好的选择。

希望这篇文章能帮助你更好地理解和使用 CSS Animations！