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的属性值，可以从出现不同的效果。