transition 属性是一个简写属性,用于设置四个过渡属性: transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。
注意: transition-duration 属性必须设置,否则默认为0s表示不执行
**语法:**transition: property duration timing-function delay;
第一种方式:
transition-property: background-color,width,height,transform;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay:0.5s;
第二种方式: transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;
示例源代码
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Transition示例</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
}
.div1{
/*transition-property: background-color,width,height,transform;*/
/*transition-duration: 2s;*/
/*transition-timing-function: linear;*/
/*transition-delay:0.5s;*/
transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;
}
.div1:hover{
background-color: fuchsia;
width: 500px;
height:500px;
transform: rotate(63000deg);
}
</style>
</head>
<body>
<div class="div1">示例</div>
</body>
</html>