我们知道,transform(变形)、transition(过渡)和animation(动画)是CSS3动画的3大部分。
在CSS3中,我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果
CSS transform 属性所实现的元素变形,呈现的仅仅是一个“结果”,而CSS transition呈现的是一种过渡“过程”,通俗点说就是一种动画转换过程,如渐显、渐隐、动画快慢等。当鼠标移动上去的时候,都会有一定的过渡效果。
语法:
transition:属性 持续时间 过渡方法 延迟时间;
其实transition属性是一个复合属性,主要包含4个子属性:
- (1)transition-property:对元素的哪一个属性进行操作;
- (2)transition-duration:过渡的持续时间;
- (3)transition-timing-function:过渡使用的方法(函数);
- (4)transition-delay:可选属性,指定过渡开始出现的延迟时间;
举例:
<!doctype html> <html> <head> <title>css3过渡</title> <style type="text/css"> div { display:inline-block; padding:5px 10px; border-radius:5px; background-color:silver; cursor:pointer; transition:background-color 1s linear; -webkit-transition:background-color 1s linear; -moz-transition:background-color 1s linear; -o-transition:background-color 1s linear; } div:hover { background-color:#45b823; } </style> </head> <body> <div>css3教程</div> </body> </html>
在浏览器预览效果如下:
分析:
上面代码通过transition属性指定:当鼠标指针移动到div元素上时,在1秒钟内让div元素的背景色从灰色平滑过渡到浅绿色。其中lineaer是过渡函数。
上面,我们用一个例子让大家对CSS3过渡动画有一个感性的认知,在接下来的课程中,我们对transition-property 、transition-duration 、transition-timing-function和transition-delay这4个 transition子属性进行详细讲解。
transition:background-color 1s linear;
上面这句代码等价于:
transition-property:background-color; transition-duration:1s ; transition-timing-function:linear; transition-delay:0;
CSS3过渡往往可以与CSS3变形一起使用,可以动态地展示变形的一个过程,丰富的动画效果。