版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
过渡(CSS3)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaSctript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
transition:要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化,用逗号隔开;
transition-property:规定应用过渡的CSS属性的名称
transition-duration:定义过渡效果花费的时间,默认为0,要用单位,可以是ms或者s
transition-timing-function:规则过渡效果的时间曲线,默认为"ease"
linear:匀速|ease逐渐慢下来|ease-in加速|ease-out减速|ease-in-out先加速后减速
transition-delay: 规定过渡效果何时开始,默认是0;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
transition: width 1s ease 0s,height 1s ease-in 1s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>过渡</div>
</body>
</html>
效果如下: