过渡
2018-04-25 本文已影响0人
琪33
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
margin:100px auto;
/* 过渡的属性详解*/
/* 过渡属性*/
/* 如果希望所有的属性都发生过渡 使用过all*/
transition-property: all;
/* 过渡持续时间*/
transition-duration:4s;
/* 运动曲线*/
/* linear 线性 ease ease-in ease-out ease-in-out :先加速后减速 */
transition-timing-function: ease-in-out;
/* 过渡延迟*/
transition-delay: 1s;
/* 简写*/
transition:width 4s ease-in-out 0s;
}
.box:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
