CSS3 Transition Animation

CSS3:

First, Transition: <property> <duration> <animation type> <delay>

eg:.div{width:10px;}. div:hover{transition:width:100px 2s ease-in-out 1s;} 1s after div original width:10px into 100px, the time is 2s, speed to accelerate and then decelerate.

<property> perform transition effects when one of the attributes of an element is changed
1. None (no property changes); When its value is none, transition stops executing immediately.
2, all (property changes) default value, when all is specified, the element will perform the transition effect when any property value changes occur.
3, indent (element attribute name); indent refers to a property value of the specified element: Width,height,background,opacity ...

<duration> Duration,
Unit is s (seconds), default is 0

<animation type>: Form of motion
1, Ease: (gradually slow) default value
2, Linear: (Constant speed)
3, Ease-in: (acceleration)
4, Ease-out: (deceleration)
5, Ease-in-out: (Acceleration and deceleration)
6, Cubic-bezier: (this value allows you to customize a time curve)

<delay> How long does the delay begin?
Unit is s (seconds), default is 0

Example: transition:all 1s ease 1s (if a click event)
Rep: after 1 seconds of clicking, all the properties are moving within 1s and are buffered

Attention:
1 default: Transition:all 0 ease 0, no effect at this time because the motion duration is 0

2 change multiple attributes, separated by commas
div{
Transition-property:width, height, transform, background
transition-duration:1s, 1s, 1s, 1s
}

Two

Tranform properties include: 1, none means no transformation, 2, rotate rotation transform:rotate (20deg) rotation angle can be negative. You need a transform-origin to define the rotation base point for the left top center right bottom or coordinate value (50px 70px). In other words, it depends on which point you want to rotate. 3, Skew twisted Transform:skew (30deg,30deg) skew (relative x-axis tilt, relative y-axis tilt) 4, scale scaling transform:scale (2,3) transverse magnification 2 Times, 3 times times the vertical magnification. such as equal to write a parameter to enlarge. 5, Translate mobile transform:translate (50px, 50px); 6, perspective lens to the element plane distance, all elements are placed on the z=0 plane, such as perspective (300px), the lens distance element surface position is 300px;//the property to be placed before the action properties

CSS3 Transition Animation