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); }