animation 属性总结

animation 属性:

是 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

<single-animation-iteration-count>

动画播放的次数。该值必须是animation-iteration-count可用的值之一。

<single-animation-direction>

动画播放的方向。该值必须是animation-direction可用的值之一。

<single-animation-fill-mode>

确定动画在执行之前和之后这两个阶段应用的样式。该值必须是animation-fill-mode可用的值之一。

<single-animation-play-state>

确定动画是否正在播放。该值必须是animation-play-state 中可用的值之一。

css3 animation（动画）属性

1.所有属性集合：

animation: name， duration， timing-function， delay， iteration-count， direction，
 fill-mode， play-state

2.animation-name属性值：

• 指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
• 绑定动画名（@keyframes名）

3.animation-duration属性值：

   规定动画完成一个周期花费的秒或毫秒。默认是0

4.animation-timing-function属性值:
规定动画的运动曲线

• linear--------速度均匀
• ease-------低速加快变慢（默认）
• ease-in-------低速开始
• ease-out--------低速结束
• ease-in-out-------低速开始结束
• cubic-bezier(n,n,n,n)-------0-1数值自己定义

5.animation-delay属性值：

规定动画何时开始。默认为0

6.animation-iteration-count属性值：

• 默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

• number：动画播放的次数 不可为负值. 可以用小数定义循环(0.5 将播放动画到关键帧的一半（from 0 ~ 50%).

• infinite-------无限（永远）

7.animation-direction属性值:
规定动画是否在下一周期逆向的播放。

• normal-------正常播放（默认）
• reverse-------反向播放
• alternate-------奇数次正向播，偶数次反向播
• alternate-reverse-------奇数次反向播，偶数次正向播

8.animation-fill-mode属性值：

• none
  默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

• forwards
  表示动画在结束后继续应用最后的关键帧的位置

• backwards
  会在向元素应用动画样式时迅速应用动画的初始帧

• both
  元素动画同时具有forwards和backwards效果

9.animation-play-state属性值：
规定动画是否正在运行或暂停。

• paused-------暂停
• running-------正在运行（默认）

配合@keyframes使用

(@keyframes不可以在内联中使用)

语法如下

//1.也可以写成这样

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

//2.也可以写成这样

@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

小例子：（以改变宽度为例）

.div1{
width: 20px;
height: 20px;
margin: 100px auto;
background: #ccc;
animation: mymove 5s;

}

/* 规定动画。 */
@keyframes mymove
{
0% {width:20px;}
25% {width:200px;}
50% {width:100px;}
75% {width:200px;}
100% {width:20px;}

}

兼容性：

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀：

div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}

@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}