web前端入门到实战：CSS动画@keyframes的用法

CSS动画

CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！

动画浏览器支持

IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

什么是CSS动画？

动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。

@keyframes规则

在@keyframes规则中指定CSS样式时，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到元素。以下示例将“example”动画绑定到

元素。动画将持续4秒，并且会逐渐将

元素的背景颜色从“红色”更改为“×××”：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 要将动画应用到的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

注意：该animation-duration属性定义动画完成所需的时间。如果animation-duration未指定该属性，则不会发生动画，因为默认值为0（0秒）。 在上面的示例中，我们通过使用关键字“from”和“to”（表示0％（开始）和100％（完成））指定样式何时更改。也可以使用百分比。通过使用百分比，您可以根据需要添加任意数量的样式更改。当动画完成25％，完成50％时，以及动画100％完成时，以下示例将更改

元素的背景颜色：

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 将动画应用到元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

以下示例将在动画完成25％，完成50％时再次更改背景颜色和

元素的位置，并在动画完成100％时再次更改：