css3里的动画元素

CSS3的动画元素

相信学习了HTML的同学对动画元素一定是不陌生了。
那我们今天就来了解了解动画元素的一些基本概念：
动画元素的属性是：animation

这个动画元素与我们学习的位移元素又有些相似的地方，但是他们又不尽相同。
那我们就来看看他们的相同点和不同点都有哪些：animation VS transtion（位移）

相同点：都是随着时间改变属性。

不同点：transtion需要出发一个时间，才会随着时间改变其CSS属性。
初始效果 —— 最终的效果之间的变化

而animation在不需要出发任何时间的情况下也可以显示随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。CSS的animation就需要明确的动画属性值。
初始效果——动画帧——动画帧——最终的效果

animation的属性：
1、animation-name： 必要属性
检索或者设置对象所应用的动画名称
必须与规则@keyframes配合使用。

定义关键帧：
@keyframes name｛
from｛｝
to{ }
｝
或者
@keyframes name{
0%{}
50%{}
100%{}
}

2、animation - duration{} 必要的
检索或者设置对象动画的持续时间，单位是s或者ms。

3、animation - delay 非必要
检索或者设置对象动画延迟的时间。

4animation - timing -function:
动画过度类型的属性值
属性值有“;inear 匀速 ease平滑过度 ease默认值，平滑过去 ease-in 由慢到快
ease=out 由快到慢 ease-in-out 由慢到块再到慢
step-start 马上跳到关键帧画满的最后一帧。

5、animation - iteration - count： value；（数值）
infinite; （无限循环）
设置动画的循环播放次数

6、animation -direction：normol； 正常方向
reverse 反方向运行
alternate 正常运行再反方向运行，并且持续运行
alternate-reverse 反向运行再正常运行并且持续运行。
设置动画在循环中是否反向运行

7、animation-fill-mode：none；默认值 在运动结束后回到初始位置，在延迟的情况下，让0%在延迟后生效。
backwards； 在延迟的情况下，让0%在延迟前生效。
forwards； 在动画结束后，就停流在结束位置。
both； backwards和forwards属性同时生效。
动画在播放前后，动画效果是否可见。

8、animation-play-state：running； 运动
paused； 暂停
通过鼠标控制动画运行或暂停。