Css3动画

Css3动画

一、 过渡transition

过渡transition能让始末属性值不同的属性，有个缓慢（时间自定）的变化过程，效果通过鼠标划过、单击、获得焦点或对元素任何改变中触发，如hover（鼠标滑过事件）
语法：
transiton: 过渡属性 过渡时间 延迟时间 过渡的动画类型；
如：
没有加transition属性:

结果为：

可以看到他是直接秒变的
加上transition属性:

结果为：

可以看到他是有个2s是动画过程的。

transition的属性：

1、transition-property（过渡的属性，默认all）

2、transition-duration(过渡的时间)
过度时间单位（s, ms）

3、transition-delay（延迟时间）
延迟时间单位（s, ms）

4、transition-timing-function（过渡的动画类型）
属性值：
Linear 匀速
ease（默认值） 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
贝塞尔曲线
网址：http://cubic-bezier.com/

复合式写法：
transition: all 2s 1s linear ;

注：复合式写法，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；

二、动画animation

动画animation,和transition类似都可以写出一些简单的动画，相比animation强大一些，他可以有多个动画过程，而transition只能定初态和结束状态。
动画animation包括动画的声明及动画的调用。

动画animation的声明

语法一：
@keyframes 动画名称{
from{初始状态属性}
to{结束状态属性}
}
语法二：
@keyframes 动画名称{
0%{初始状态属性}
100%{结束状态属性}
}

动画animation的调用

animation：动画名称 过度时间 延迟时间 动画的过渡类型 执行次数 ；

注：动画名称和持续时间是必须要的，当过度时间和延迟时间同时有的时候，过度时间和延迟时间顺序不能互换，前面是过度时间，后面的是延迟时间。

Animation属性：

1、animation-name（属性名，必须）
必须与规则@keyframes配合使用

2、animation-duration（过度时间，必须）单位：s,ms

3、animation-delay（延迟时间）单位：s,ms

4、animation-timing-function（动画的过度类型）
属性值：
linear：线性过渡。
ease：平滑过渡。默认值；
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

5、animation-iteration-count（执行次数）
属性值：infinite | number;
Infinite为无限循环

6、animation-direction（动画循环是否反向）
属性值：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

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

8、animation-play-state(动画的状态)
属性值：running | paused

实例：

简单的轮播图就这样搞定了，运行结果：

通过改animation的属性值，可以从出现不同的效果。