CSS 动画速记 - CSS

简介

在 web 开发中，动画是一种非常重要的元素。CSS 动画是一种使用 CSS 属性来制作动画的简单技巧，可以让我们轻松地为页面添加一些视觉效果。

动画基础

CSS 动画有两种基本概念：关键帧和动画属性。

关键帧

关键帧指的是动画中的某个状态，我们可以在关键帧中定义一些属性，比如位置和颜色。每一次动画只会显示当前的关键帧所定义的属性。

在 CSS 中，通过 @keyframes 规则来定义关键帧。代码示例：

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

上面的代码定义了一个叫做 myAnimation 的动画，它的关键帧分别在 0% 和 100% 时设置了不同的透明度。

动画属性

动画属性可以用来控制动画的行为，比如播放时间、延迟时间等。

在 CSS 中，常用的动画属性有：

• animation-name：指定该动画的名称，也就是上文中定义的 @keyframes 规则的名称。
• animation-duration：指定动画播放的时间，单位是秒或毫秒。
• animation-timing-function：指定动画的速度变化曲线，也就是动画的缓动效果。
• animation-delay：指定动画播放前的延迟时间。
• animation-iteration-count：指定动画播放的次数。
• animation-direction：指定动画的播放方向，正向还是反向播放等。
• animation-fill-mode：指定在播放前或之后的元素状态。

代码示例：

.box {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

上面的代码把 myAnimation 动画应用到了 .box 元素上，并指定了播放时间、延迟时间、缓动效果、播放次数等等。

动画细节

缓动效果

CSS 提供了一些缓动函数，可以让动画变得更加平滑自然。常用的缓动函数有：

• ease：默认值，先慢后快再慢。
• linear：匀速播放。
• ease-in：先慢后快。
• ease-out：先快后慢。
• ease-in-out：先慢后快再慢。

代码示例：

.box {
  animation-timing-function: ease-in-out;
}

关键帧百分比

关键帧可以使用百分数来指定进度。比如，我们可以在 50% 的位置上改变元素的透明度，让动画产生一个渐变效果。

代码示例：

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

动画暂停和恢复

我们可以通过 animation-play-state 属性来控制动画的播放状态。比如，我们可以让动画在 hover 时暂停，离开时继续播放。

代码示例：

.box:hover {
  animation-play-state: paused;
}

多个动画叠加

我们可以在同一个元素上应用多个动画，让它们同时或按顺序播放，产生更复杂的动画效果。

代码示例：

.box {
  animation: myAnimation1 2s ease-in-out 0s infinite alternate,
             myAnimation2 3s ease 1s 1 normal forwards;
}

上面的代码把 myAnimation1 和 myAnimation2 两个动画应用到了 .box 元素上，并设定了它们的播放顺序、播放时间、缓动效果、播放次数等等。

总结

以上就是 CSS 动画的基本概念和用法。希望这份速记能够帮助你更快地掌握 CSS 动画技巧，在 web 开发中更加得心应手。