CSS3 Animation Instance Test

1.CSS3 Animation Property Analysis (2016-5-11)

1.transition: Specify the attribute transformation rules, so to speak. Transition (A,B,C,D);

A: The attributes to be transformed;

B: Transition time;

C: the way of movement;

D: How long does it take to start the animation

Ex:<div class= "Exdiv" > Test div</div>

. exdiv{width:200px;height:100px; transition:width 2s ease-in 2s}

div:hover{width:500px};

The example shows that when the party mouse moves into the div, the width of the div changes to 500px within 2s after the delay of 2s;

2.transform: We are able to move, scale, rotate, lengthen, or stretch the elements.

The attribute 2d transformation has the following properties

• Translate ()
• Rotate ()
• Scale ()
• Skew ()
• Matrix ()

Translate (x, y): displacement of the element;

Ex:<div class= "Exdiv" > Test div</div>

. Exdiv{transform:translate (50px,100px)} indicates that the div moves from the current position to the left 50px,top move 100px;

Rotate (x): angular rotation of elements

. Exdiv{transform:rotate (50deg)} bid div rotates clockwise 50 angles

Scale (x, y): angular rotation of elements

. Exdiv{transform:scale (2,4)} indicates that the div width is increased to twice times the original size, and the height is increased to 4 times times the original size

The skew (x, Y) method, the element flips the given angle, according to the given horizontal (x-axis) and vertical-line (y-axis) parameters:

. exdiv{Transform:skew (30DEG,20DEG)} flips the element around the X-axis by 30 degrees and flips 20 degrees around the Y-axis.

CSS3 Animation Instance Test