最近感觉自己对css3动画一知半解,没有去认真揣测其中参数的含义。今天利用空闲时间,先从常用的transition来入手。
Transition对应的CSS属性列表:
1、transition-property
* 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。
* 初始默认值为all.
2、transition-duration
* 指定“转换”过程的时间,如:1s、none。
* 初始默认值为0.
3、transition-timing-function
* 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。
* 初始默认值为default.
4、transition-delay
* 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.
有兴趣的可以看看我利用transition实现slide幻灯片demo。
[html]
CSS3 SlideCSS3 Slide
[/html]