css3中keyframes的用法是什么-猿码集

1. 什么是CSS3中的keyframes

CSS3中的keyframes可以用来在不同的时间点对一个元素进行动画处理。它允许用户对元素进行多个动画，这些动画可以同时进行也可以依照顺序逐个进行，具体效果详见后面的实例展示。

1.1 关键帧属性

keyframes中可以定义多个关键帧（from 和 to）和百分比（0%和100%）。每个关键帧中可以定义元素的属性值，在动画时这些属性值会根据定义的百分比依次渐变到相应的目标值，具体可参见以下代码示例：


@keyframes myfirst {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  75% {background: green;}
  100% {background: red;}
}

上述代码中定义的keyframes可以让元素在动画时在0%（开始）时background为red，随后分别以25%（1/4）、50%（1/2）、75%（3/4）时分别为yellow、blue、green，最终在100%（结束）时为red。

1.2 animation-timing-function

在定义好keyframes后，可以通过animation-timing-function属性设置动画的变化速率，可取值：linear（等速），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速），cubic-bezier（自定义变化速率）。


div {
  animation-timing-function: linear;
}

1.3 animation-duration

animation-duration 属性指定动画持续的时间（秒或毫秒）。


div {
  animation-duration: 3s;
}

1.4 animation-delay

animation-delay 属性指定了在动画开始之前的延迟（秒或毫秒）。


div {
  animation-delay: 2s;
}

1.5 animation-iteration-count

animation-iteration-count 属性指定动画应该播放的次数。


div {
  animation-iteration-count: 2;
}

1.6 animation-direction

animation-direction 属性指定是否应该轮流反向播放动画。normal 为默认值，表示动画正常播放， alternate 表示在每个循环周期中，动画轮流反向播放。


div {
  animation-direction: alternate;
}

1.7 animation-fill-mode

animation-fill-mode 属性指定了动画在播放之前和之后如何将样式应用于其目标。可取值：none、forwards、backwards、both。


div {
  animation-fill-mode: forwards;
}

1.8 animation-play-state

animation-play-state 属性指定了动画是否正在运行或已暂停。暂停动画可用来使动画在页面加载时保持暂停、在滚动到元素的时候再启动动画。


div {
  animation-play-state: running;
}

2. CSS3 keyframes的实例展示

下面是一个示例代码，运行后可看到一个背景色渐变的动画效果：


div {
  animation-name: example;
  animation-duration: 3s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

上面代码中，我们定义了背景色从红到黄的动画效果，我们还可以用百分数来定义动画的各个阶段：


div {
  animation-name: example2;
  animation-duration: 3s;
}
@keyframes example2 {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: blue;}
}

同样，我们可以为多个属性设置动画，例如：


div {
  animation-name: example3;
  animation-duration: 3s;
}
@keyframes example3 {
  0%   {background-color: red; left: 0px; top: 0px;}
  50%  {background-color: yellow; left: 200px; top: 0px;}
  100% {background-color: blue; left: 200px; top: 200px;}
}

我们还可以设置动画的速率和播放次数：


div {
  animation-name: example4;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes example4 {
  0%   {background-color: red; left: 0px; top: 0px;}
  50%  {background-color: yellow; left: 200px; top: 0px;}
  100% {background-color: blue; left: 200px; top: 200px;}
}

上面代码中，我们加入了animation-timing-function属性，让动画的速度变为常数，而animation-iteration-count属性则让动画无限次播放。

3. 总结

CSS3中的keyframes用来在不同时间点对元素进行动画处理，它的大量属性可以让用户自由地控制动画效果。它有着广泛的适用场景，例如制作菜单、列表的鼠标悬停动画、滚动条样式动画等等。总之，学习并掌握CSS3中的keyframes，可以让我们为网站增添更多的创意和动感。

css3中keyframes的用法是什么