30、CSS3 动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

使用 @keyframes 可以创建动画。在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字“from”和“to”，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

动画开头背景色为红色，动画进行到30%时背景色变为深蓝色，动画进行到一半（50%）背景色变为黄色，进行到70%时又变回深蓝色，动画完成时背景色变为最初的红色。这段动画的创建代码如下：

@keyframes mycolor {
0% { background-color: red; }
30% { background-color: darkblue; }
50% { background-color: yellow; }
70% { background-color: darkblue; }
100% { background-color: red; }
}

1) animation-name 属性指定了一个 @keyframes 动画。
2) animation-duration 属性定义动画完成一个周期需要多少秒或毫秒。
3) animation-timing-function 指定动画将如何完成一个周期
4) animation-delay 属性定义动画什么时候开始。
5) animation-iteration-count 属性定义动画应该播放多少次。
其值为：n（一个数字，指定播放多少次）、infinite（指定播放无限次）
6) animation-direction 属性定义动画是否应该播放完后逆向交替循环。值对设置了多次播放的动画有效。
其值为：normal（默认值，动画正常）、alternate（动画交替循环逆向运动）
7) animation--play-state 属性指定动画是否正在运行或已暂停状态。
其值为：paused（暂停动画）、running（运行动画）
8) animation属性有6个缩写属性：
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction。

例1：播放两次时长为5s的变色（红->黄->绿->h红）动画，结束。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
div { 
  width: 200px;
  height: 200px;
  background: red;
}
@keyframes mycolor {
  0% { background-color: red; }
  30% { background-color: yellow; }
  60% { background-color: green; }
  100% { background-color: red; }
}
div:hover {
  animation-name: mycolor;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: 2;
}
</style>
</head>
<body>
 <div></div>
</body>
</html>

其实和上一节介绍的“过渡”很相似，但是这节的知识点“动画”将变化的过程封装在@keyframes中，而用盒子的hover属性来调用动画。

例2:播放一次时长为5s的方块变色移动（红->黄->蓝->绿->红）动画，结束。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myfirst 5s;
}

@keyframes myfirst {
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

动画过程如下：
图片说明 ->图片说明 ->
图片说明 ->图片说明