CSS3 Transitions
参考:
http://www.w3school.com.cn/cssref/pr_transition.asp
https://www.w3schools.com/css/css3_transitions.asp
宽度 持续2秒 线性过渡 延时1秒
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
简写:
div {
transition: width 2s linear 1s;
}同时设置多个过渡,用逗号隔开
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}Transition + Transformation
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}