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