CSS 3 Transition-transition

CSS 3 Transitions

=====================================================================================

Transitions---an element transitions smoothly between states, and CSS 3 uses the Transition property to achieve transition effects.

Transition: Transition attribute Execution time time function delay time;

Time function---Set the velocity of the element motion

(1) Bezier curve Cubic-bezier (P1 (x, y), p2 (x, y)

Pre-defined Bezier curves:

Ease (default value)

Linear

Ease-in

Ease-out

Ease-in-out

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/80/20/wKioL1c5MAuTcTnkAAFsl0tmCqM751.png "style=" width : 632px;height:248px; "title=" Ease.png "width=" 632 "height=" 248 "border=" 0 "hspace=" 0 "vspace=" 0 "alt=" Wkiol1c5mautctnkaafsl0tmcqm751.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/80/23/wKiom1c5LyXzp4yvAADM60S2Pwg726.png "style=" float: LEFT;WIDTH:350PX;HEIGHT:154PX, "title=" Ease1.png "width=" "" height= "154" border= "0" hspace= "0" vspace= "0" alt= " Wkiom1c5lyxzp4yvaadm60s2pwg726.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/80/23/wKiom1c5LyXgtSZcAACoL6tSIQ4342.png "style=" width : 370px;height:167px; "title=" Linear.png "width=" 370 "height=" 167 "border=" 0 "hspace=" 0 "vspace=" 0 "alt=" Wkiom1c5lyxgtszcaacol6tsiq4342.png "/>

(2) Steps ()

Step-start//Step number is one

Step-end

=============================================================================================================== ========================================================================

Example one:

img:hover{transform:translate (600px);} img{transition:2s Cubic-bezier (0.6,0.1,0.1,0.7);}

Example two:

<style>        div:hover  img{            transform:translate (300px);         }        .i01{             transition:2s steps (3,start);         }        .i02{             transition:2s steps (3,end);         }        .i03{             transition:2s linear;         }    </style> 

<div> <br/> <br/>  </div>

Each step of the ===========transition property can be represented by a separate property

Transition:all 2s linear 3s;

Transition-property:all;    Transition-duration:2s;    Transition-timing-function:linear; transition-delay:3s;

CSS 3 Transition-transition