动画animation

动画

@keyframes

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
实例：

/*设置动画*/
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
/*调用动画*/
div
{
	animation:myfirst 5s;
}

设置动画渐变方式可以使用from…to，等同于0%…100%，或者设置多个百分节点。
如下：

@keyframes myfirst
{
	0%{color:#fff}
	25%{color:#ff0000}
	50%{color:#ff5200}
	100%{color:#000}
}

@keyframes规则和动画属性
animation所有动画属性的简写

animation-name
规定 @keyframes 动画的名称。

animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。值可以设置2s表示2秒

animation-timing-function
规定动画的速度曲线。默认是 “ease”。
有以下值：
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-delay
规定动画何时开始。默认是 0。比如设置2s，表示2s后再开始执行动画。可以设置负数，比如设置-2s表示跳过2秒进入动画周期。

animation-iteration-count
规定动画被播放的次数。默认是 1，表示播放一次，如果需要设置永久循环可以设置infinite

animation-direction
规定动画是否在下一周期逆向地播放。默认是 “normal”。
有如下属性值：
normal默认值，动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

animation-play-state
规定动画是否正在运行或暂停。默认是 “running”。注意：在JavaScript中使用此属性在一个周期中暂停动画。
有如下属性值：
paused指定暂停动画
running指定正在运行的动画
例如：

div{
	animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}
/*等同于*/
div{
 animation: myfirst 5s linear 2s infinite alternate;
}