动画效果——过度

动画效果——过度

过度动画:在不使用Flash或JavaScript的情况下,当元素从一种样式变成另一种样式时添加效果。

过度动画的属性:

1、transition 简写属性,用于在一个属性中设置四个过度属性。

2、transition-property 规定过渡应用的CSS属性的名称。

① none 没有属性会获得过度效果。

② all 所有属性都将获得过度效果。

③ 属性名称。

3、transition-duration 定义过度效果话费的时间。默认:0。单位:秒或毫秒。

4、transition-timing-function 规定过度效果的时间曲线。默认:ease。

① linear 规定以相同速度开始至结束的过度效果(等于cubicbezier(0,0,1,1))。

② ease 规定慢速开始然后变快,然后速度变慢的效果。(等于cubicbezier(0.25,0.1,0.25,1))

③ ease-in 规定以慢速开始的过度效果。(等于cubicbezier(0.42,0,1,1))

④ ease-out 规定以慢速结束的过度效果。(等于cubicbezier(0,0,0.58,1))

⑤ ease-in-out 规定以慢速开始和结束的过度效果。(等于cubicbezier(0.42,0,0.58,1))

⑥ cubic-bezier(n,n,n,n) 在cubic-bezier中定义自己的值。可能的值是0至1之间的数值。

transition-delay 规定过渡效果何时开始。默认:0。

原文地址:https://www.cnblogs.com/wzjie1234/p/10721332.html