New features in CSS3-transition

Transitions in CSS3

• A new transition property has been added to CSS3, which allows us to add transition effects to elements when they change from one style to another without using flash animation or Javascript. This transition is a gradual transition from one state to another.

• The easiest way to use transition is to use it with hover.

• Its syntax is:

    transition: 要过渡的属性 花费的时间 运动曲线 开始时间;
  

• Parameter Description:

parameter	Explanation
Attribute to be transitioned (must write)	The attributes to be changed, such as width, height, color, inner and outer margins, etc. are all fine. If you want all attributes to change, you can use all instead.
Time spent (must write)	How long will it take to complete the effect of this transitional change. The unit is second, note: be sure to write the unit such as 0.5s or .5s
Motion curve (can be omitted)	The default value is ease (the speed of change gradually slows down), and for multiple values, refer to the next table.
Start time (can be omitted)	The default is 0s (must write the unit), and the delay trigger time can be set

• Motion curve value table

Possible values ​​of motion curve	meaning
linear	Uniform speed
ease	Slow down gradually
ease-in	accelerate
ease-out	slow down
ease-in-out	Accelerate first and then decelerate

• E.g:

    /* CSS */
    .a {
        width: 150px;
        height: 10px;
        border: 1px solid red;
        border-radius: 5px;
    }
  
    .b {
        width: 50%;
        height: 100%;
        border-radius: 5px;
        background-color: red;
        transition: width .5s;
    }
  
    .a:hover .b {
        width: 100%;
    }
  
    <!-- HTML -->
    <div class="a">
    	<div class="b"></div>
    </div>
  

• The effect of the above code is: when the mouse moves to box a, the progress bar will gradually transition to 100% in 0.5 seconds