1、animation-name属性

2、animation-duration属性

3、animation-timing-function属性

4、animation-delay属性

5、animation-iteration-count属性

6、animation-direction属性

7、animation-fill-mode属性

8、animation-play-state属性

css3的动画属性

1、animation-name属性

animation-name属性：定义动画名称，用于指定由规则定义的动画的一个或多个名称。

注：animation-name属性必须与规则@keyframes配合使用，因为动画名称是由@keyframes定义声明的，如果提供多个属性值用逗号隔开。

@keyframes规则相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name就可以执行动画。

2、animation-duration属性

animation-duration属性用于指定执行一个周期动画应该花多长时间。

时间以秒或毫秒指定，并且最初设置为“0”，这意味着动画即时发生；我们可以指定一个持续时间或多个以逗号分隔的持续时间。

3、animation-timing-function属性

animation-timing-function属性是用来设置播放方式的，它可以指定定时函数，该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展，允许它在其过程中改变速度。

4、animation-delay属性

animation-delay属性：定义动画何时开始（开始时间），它允许动画在应用后的某个时间开始执行，或者在应用之前看似已经开始执行一段时间。

初始值为“0”，这意味着动画将在应用于元素后立即开始播放。正时间值表示偏移量，该偏移量定义动画开始之间（通过动画属性将动画应用于元素时）与开始执行时的延迟时间。

我们还可以为animation-delay提供负值。负值，就像'0'一样，意味着动画一旦被应用，就会立即执行，但是由延迟的绝对值自动推进，就好像动画在过去已经启动了指定的时间，并且它似乎已经在其游戏周期的中途开始了。例如，如果为animation-delay提供“-2S”的值，动画将立即启动，只要它被应用，但它将显示为它已经启动2s之前，你已经应用它。

5、animation-iteration-count属性

animation-iteration-count属性：用于指定动画停止前播放动画循环的次数，即：播放次数。

初始值为“1”，表示动画将从头到尾播放一次；通常会取“infinite”值，表示无限循环播放。

6、animation-direction属性

animation-direction属性：用于指定动画是否应在某些或所有循环或迭代中反向播放，即：播放方向。

该属性可能取的值：

normal：正常方向

reverse：动画反向运行，方向始终与normal相仿

alternate：动画会循环正反交替运动

7、animation-fill-mode属性

animation-fill-mode属性定义动画在播放后的状态。更具体地说，它定义了在动画延迟时间内以及动画完成执行后应用于元素的样式。

该属性可能取的值：

none：默认值，不设置样式

forwards：结束后保持动画结束的状态

backwards：结束后返回动画开始时状态

both：结束后可遵循forwards和backwards两个规则

8、animation-play-state属性

animation-play-state属性：用于检索或设置对象动画的状态，即：指定CSS 动画是正在运行还是暂停。

该属性可能取的值：

running：默认值，运动；

paused：暂停。

CSS3 动画属性
下面的表格列出了 @dukeyframes 规则和所有动画属性：

keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
下面的两个例子设置了所有动画属性：
实例

1、animation-name属性

animation-name属性：定义动画名称，用于指定由规则定义的动画的一个或多个名称。

2、animation-duration属性

animation-duration属性用于指定执行一个周期动画应该花多长时间。

时间以秒或毫秒指定，并且最初设置为“0”，这意味着动画即时发生；我们可以指定一个持续时间或多个以逗号分隔的持续时间。

3、animation-timing-function属性

animation-timing-function属性是用来设置播放方式的，它可以指定定时函数，该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展，允许它在其过程中改变速度。

1、animation-name属性

2、animation-duration属性

3、animation-timing-function属性

4、animation-delay属性

5、animation-iteration-count属性

6、animation-direction属性

7、animation-fill-mode属性

8、animation-play-state属性

transition ：   平衡过渡

transition是一种css里的一种过渡效果，完成过渡需要多少秒 。延迟几秒开始 ，过渡的速度（一般有 "linear 匀速"  和“ease 先慢后快再慢结束”及“cubic-bezier(n,n,n,n) 自己定义的值，可能的值是 0 至 1 之间的数值”等）

一般transition通过鼠标事件触发 ，如（hover）产生动画效果

animation： 动画

animation 一般通过@keyframes 规则，创建动画。

animation通过关键帧的名称 开始的时间 动画的速度（和上一致外还有一个step-end逐帧播放）是否重复播放（infinite）

进行根据需求进行修改即可

animation一般通过@keframes关键帧的规则来创建动画，可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束

transform： 改变元素的大小、位置

translate：移动

translate（x,y） 定义2D空间

translate（x,y,z） 定义3D空间

这个的移动值可以使用像素px支持负值

scale：放大

scale（数值）定义图片放几倍大（0为不显示,1则是图片原本的大小）

rotate：旋转

rotate(x,y)  定义2D空间

rotate(x,y,z)  定义3D空间

这个的旋转值使用deg 旋转了多少度，支持负值

skew ：倾斜（扭曲）

skew(x,y)  定义2D空间

skew(x,y,z)  定义3D空间

1、animation-name属性

2、animation-duration属性

3、animation-timing-function属性

4、animation-delay属性

5、animation-iteration-count属性

6、animation-direction属性

7、animation-fill-mode属性