惊讶！！！CSS3 关键帧动画——animation与@keyframes竟然是这样使用
在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。
1.关键帧动画（@keyframes）
@keyframes语法：@keyframes <animation-name>: {<keyframes-selector>{<CSS-styles>}}
其取值说明如下：
<animation-name>:动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。
<keyframes-selector>:动画持续时间的百分比，也可以是from和to。from对应的是0%，to对应的是100%，建议使用百分比。
<CSS-styles>:设置一个或多个合法的样式属性。要实现动画，必须设置样式属性。
注：使用动画属性来控制动画的实现，其中关键帧动画是通过名称与动画绑定的。
2.动画的实现（animation属性）
animation属性，是专门用于动画设计的，它能把一个或多个关键帧动画绑定到元素上，以实现更加
复杂的动画。
animation属性是一个复合属性，包含6个子属性：animation-name、animation-duration、animation-timing、animation-delay、animation-iteration-count、animation-direction；
对于子属性，可在其前面加上不同的前缀，以适应不同内核的浏览器。
animation语法：animation：<name> <duration> <timing-function> <delay> <iteration-count> <direction>；
其取值说明如下：
<name> :定义动画的名称，绑定指定的关键帧动画。其语法为：animation-name:
<keyframename>：none;
none是默认值，表示没有动画；<keyframename>指定动画名称，即指定名称对应的动画关键帧。
<duration>:定义动画播放的周期时间。其语法为：animation-duration：<time>;
<time>用于指定播放动画的时间长度，单位为秒(s)或毫秒(ms)
<timing-function>:定义动画的播放方式。其语法如下：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
其具体的动画播放的属性值，可参考transition-timing-function中的属性值。
<delay>:定义动画的延迟时间。语法为：animation-delay:<time>;
<time>表示时间，单位为秒(s)或毫秒(ms)
<iteration-count> 定义动画应该播放的次数。语法为：animation-iteration：infinite|<n>;
infinite表示无限次的播放动画；<n>表示动画播放的次数，默认值为1，表示只播放一次。
<direction>:定义动画播放的顺序方向。语法为：animation-direction：normal|alternate；
normal表示按照关键帧设定的动画方向播放；alternate表示动画的播放方向与上一播放周期相反，第一周期的
播放方向还是正常的播放方向。
补充
animation-name 剧本名
animation-duration: 动画持续时间
animation-delay: 动画延迟时间
animation-timing-function: 运动曲线
animation-iteration-count: 动画执行次数
animation-fill-mode: 是否保持最终状态
- none 不改变默认行为。
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在animation-delay 所指的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 向前和向后填充模式都被应用。
animation-direction: 复原时时否也使用动画
animation-play-state: 暂停还是播放状态
小案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>帧动画(animation)属性</title>
<style>
@keyframes myanimation { /* 开始创建动画帧 */
% {
width: 100px;
background-color: red;
}
20% {
width: 160px;
background-color: blue;
}
40% {
width: 220px;
background-color: blue;
}
60% {
width: 280px;
background-color: yellow;
}
80% {
width: 340px;
background-color: yellow;
}
100% {
width: 400px;
background-color: orange;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
/* 设置帧动画效果 */
-webkit-animation-name: myanimation;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: .5s;
-webkit-animation-iteration-count: infinite; /* 设置动画的播放次数 */
/*-webkit-animation-direction: reverse; 动画是否反向播放 */
-webkit-animation-state: runing; /* 指定动画是否正在播放或暂停 */
animation-name: myanimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: .5s;
animation-iteration-count: infinite;
/*animation-direction: reverse; 动画是否反向播放 */
animation-state: runing;
}
</style>
</head>
<body>
<div><div>
</body>
</html>
上一篇： Django第二篇
下一篇： css3关键帧动画animation