CSS3 Transition介绍

来源:互联网 发布:单片机流水灯程序 编辑:程序博客网 时间:2024/05/17 08:57

CSS3使用越来越多,对于一些高级CSS3的应用需要了解一下,网上看到转载一下,

原文见 http://www.w3cplus.com/content/css3-transition

上一节花了大篇幅整理了CSS3中动画属性中的Transform,今天我们接着一起来看CSS3动画属性中的另一个属性Transition。

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用

语法:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值:

updating....