CSS-15-transition过渡动画

transition过渡动画

1.属性

1.需要过渡的属性,一般为all,也可以是left,top等.

transition-property: all;

2.需要过渡的时间,一定要设置的,默认值为0

transition-duration: 1s;

3.需要过渡的方式,也叫曲线,默认值为ease:由快到慢

transition-timing-function: linear;

		linear值代表匀速.
		属性值:
		linear:匀速
		ease:慢快慢
		ease-in:慢速开始
		ease-out:慢速结束
		ease-in-out:慢速开始和慢速结束
		cubic-bezier(n,n,n,n)自定义值.

4.延迟时间,一般不需要设置,默认为0.

transition-delay: 3s; 

5.transition连写:
transition: all 1s linear 3s;

a.第一个值表示过渡的属性，一般为all
b.第二个值表示过渡的时间，必须要设置
c.第三个值表示过渡的方式，一般为linear（匀速）
d.第四个值表示延迟时间
没有顺序要求不过最好按照规范来写.

2.细节注意点：

（1）如果在horver中设置transition属性，那么只有鼠标移入才有动画，移出没有动画
因为鼠标移出之后，horver中的transition也被移除

（2）如果希望多个属性分开移动，则可以设置多组transition属性，每一组用逗号,隔开
transition: width 2s , height 2s 2s;

3.特点

1.不能自动开始通常配合hover一起使用

2.只能作动一次