Summary of CSS3 Animation

One: Transition animation ---transitions

meaning : In CSS3, the Transitions feature animates functionality by smoothing the transition of an element's properties from one property value to another in a specified time period.

The Transitions property is used as follows:

Transition:property | Duration | timing-function | Delay

Transition-property: represents a smooth transition to that attribute.

Transition-duration: represents a smooth transition that completes a property value over a long period of time.

Transition-timing-function represents a way to smooth transitions.

Transition-delay: defines the time that the transition animation is delayed.

The default value is all 0 ease 0

browser support level: ie10,firefox4+,opera10+,safari3+ and chrome8+

The HTML code is as follows: <  class= "Transitions">transitions transition function </div> the CSS code is as follows:. transitions {    -webkit-transition:background-color 1s ease-out;    -moz-transition:background-color 1s ease-out;    -o-transition:background-color 1s ease-out;}. Transitions:hover {    background-color: #00ffff;}

If you want to transition multiple properties, you can use a comma-separated code like this:

div {-webkit-transition:background-color 1s linear, color 1s linear, width 1s linear;}

2. We can use the Transitions feature to smoothly transition multiple property values simultaneously.

The following HTML code:<H2>Transitions smoothing transitions Multiple property values</H2><Divclass= "Transitions2">Transitions smoothing transitions Multiple property values</Div>The CSS code is as follows:. transitions2 {background-color: #ffff00;        Color: #000000;        width:300px;        -webkit-transition:background-color 1s linear, color 1s linear, width 1s linear;        -moz-transition:background-color 1s linear, color 1s linear, width 1s linear; -o-transition:background-color 1s linear, color 1s linear, width 1s linear;}.        Transitions2:hover {background-color: #003366;        Color: #ffffff; width:400px;}

Transitions smoothing transitions Multiple property values

Note:transition-timing-function represents a way to smooth transitions. It has the following values:

With ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier

As for the linear linearity we understand very well, can be understood as uniform motion, as for the Cubic-bezier Bezier curve is currently not available, can be ignored, we now understand the ease, ease-in, easy-out and Ease-in-out and other property values Meaning ;

Ease: First, fast and gradually slowly;

ease-in: first Slow and fast

easy-out: First, fast, slow.

easy-in-out: Slow down first, then slow down!

To understand the above attribute values, the following demo:

The HTML code is as follows:<DivID= "Transbox"class= "Trans_box">    <Divclass= "Trans_list Ease">Ease</Div>    <Divclass= "Trans_list ease_in">Ease-in</Div>    <Divclass= "Trans_list ease_out">Ease-out</Div>    <Divclass= "Trans_list ease_in_out">Ease-in-out</Div>    <Divclass= "Trans_list linear">Linear</Div></Div>The CSS code is as follows:. trans_box {background-color: #f0f3f9;    width:100%}.trans_list {width:30%;    height:50px;    margin:10px 0;    Background-color:blue;    Color: #fff; Text-align:center;}.    Ease {-webkit-transition:all 4s ease;    -moz-transition:all 4s ease;    -o-transition:all 4s ease; Transition:all 4s ease;}.    ease_in {-webkit-transition:all 4s ease-in;    -moz-transition:all 4s ease-in;    -o-transition:all 4s ease-in; Transition:all 4s ease-in;}.    ease_out {-webkit-transition:all 4s ease-out;    -moz-transition:all 4s ease-out;    -o-transition:all 4s ease-out; Transition:all 4s ease-out;}.    ease_in_out {-webkit-transition:all 4s ease-in-out;    -moz-transition:all 4s ease-in-out;    -o-transition:all 4s ease-in-out; Transition:all 4s ease-in-out;}.    Linear {-webkit-transition:all 4s linear;    -moz-transition:all 4s linear;    -o-transition:all 4s linear; Transition:all 4s linear;}. Trans_box:hover. trans_list{margin-left:90%;   Background-color: #beceeb;    Color: #333;    -webkit-border-radius:25px;    -moz-border-radius:25px;    -o-border-radius:25px;    border-radius:25px;    -webkit-transform:rotate (360DEG);    -moz-transform:rotate (360DEG);    -o-transform:rotate (360DEG); Transform:rotate (360deg);}

II: Animations function

The animations function is the same as the transitions function, which is achieved by changing the attribute value of the element. The difference is that using the Transitions feature is only possible by specifying a property's start and end values. The result is a smooth transition between the two property values, so that you can't achieve complex animation effects, and animations can achieve more complex animations by defining multiple keyframes and defining the attribute values of the elements in each keyframe.

Syntax:animations:name duration timing-function iteration-count;

Name: Key frame collection name (a collection of keyframes created from this name)

Duration: A smooth transition that represents the amount of time that a property value is completed

Timing-function: means a smooth transition by what means

Iteration-count: The number of iterations, which can be set to a specific value, or set to infinite for an infinite loop, the default is 1.

usage:@-webkit-keyframes key Frame's collection name {Create Keyframe code}

As in the following code: @-webkit-keyframes MyColor {   0% {background-color:red;}   40% {background-color:darkblue;}   70% {background-color:yellow;}   100% {background-color:red;}}. animate:hover {   -webkit-animation-name:mycolor;   -webkit-animation-duration:5s;   -webkit-animation-timing-function:}

Summary of CSS3 Animation