transition transition effects

Transition (transition) is one of the features of CSS3 subversive, we can without the use of JavaScript or Flash animation, when elements from a style transformation effect is to add another style for the element.

Animation Frame: a fixed order and playback speed by a picture frame. Such as motion picture film

As shown below:

Used in the transition can be implemented in CSS3 tween (transitions), as long as the current element and the "Properties" i.e., there are two status change (which we refer to as A and B represents: Form i.e. from A to B is changed ),
it can be a smooth transition, in order to facilitate presentation using hover between two states, but is not limited to the transition state hover.

Syntax:

transition: 要过渡的属性(transition-property)  花费时间(transition-duration) 
            运动曲线(transition-timing-function)  何时开始(transition-delay)

transition: property duration timing-function delay;

If more than one set attribute changes, or separated by commas.

transition: width  0.5s ease-in 0s , height  0.5s ease-in-out 1.5s;
    | 属性                         | 描述                      |
    | -------------------------- | ----------------------- |
    | transition                 | 简写属性，用于在一个属性中设置四个过渡属性。  |
    | transition-property        | 规定应用过渡的 CSS 属性的名称。      | 
    | transition-duration        | 定义过渡效果花费的时间。默认是 0。      |
    | transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 
    | transition-delay           | 规定过渡效果何时开始。默认是 0。       |

All properties change transition

transition: all 0.6s ease-out 0.1s;

Motion profile is divided into

匀速:linear    |    逐渐慢下来:ease    |    加速:ease-in    |    减速:ease-out    |    先加速后减速:ease-in-out
如图:
    <img src="https://gitee.com/le-mon/img/raw/master/Essay/transition/3.png">

Example:

     div {
        width: 300px;
        height: 300px;
        background-color: #ddd;

        /* transition 语法格式: 过度属性,花费时间,运动曲线,何时开始 */
        /* 其中,过度属性必须填上,其他非必选 */
        /* transition: width  0.5s ease-in 0s , height  0.5s ease-in-out 1.5s; */
        /* 如果想要所有的属性都一起 */
        transition: all 0.6s ease-out 0.1s;
    }

    div:hover {
        width: 400px;
        height: 400px;
        background-color: #0f0;
    }