Common CSS3 Animation styles

6, 3D Conversion
Property:
Perspective: Sets the distance from the projection plane assumed by the human eye
Affects only 3D elements and does not affect 2D elements

Set position: Added to the parent element, the child element can complete the 3D conversion when set.
1, 3d displacement
Change the position of the element on the z axis
Properties: Transform:
function: Translatez (z);
Translate3d (x, y, z);
2, 3d rotation
Property: Transform
Function:
Rotatex (deg);
Rotatey (deg);
Rotatez (deg)
Rotate3d (X,Y,Z,DEG);
X, Y, Z: value is 1,0,-1
Rotate3d ( -1,0,1,45DEG);
****************************************************
1. Transition
1, what is the transition
The smooth transformation "process" of an element from one "state" to another "state"
2. Transition Properties
Transition
3. Transition 4 Elements (sub-attributes)
1. Transition Properties
The effect of using transitions when the state of an element changes
The transition effect is triggered when the specified attribute changes
Grammar:
Transition-property:none | All | Property
Transition-property:background;
2. Transition time
How long the transition effect is completed, in seconds (s) or milliseconds (ms)
Grammar:
Transition-duration:s|ms;
Transition-duration:1s;
Attention:
The transition time defaults to 0, and if 0 o'clock, no transitions are produced.
If you want to see the transition effect, you must set the property.
3. Transition function
Specifies the speed effect of the transition over time (transition-duration).
Grammar:
Transition-timing-function
Value:
Ease: Default, slow start, fast, slow end
Linear: Constant speed start to end
Ease-in: Slow start, acceleration effect (from slow to fast)
Ease-out: Slow end, deceleration effect (from fast to slow)
Ease-in-out: Starts and ends at a slow speed, accelerates and decelerates first
4. Transition delay
After the transition operation is fired, wait for how long before the effect starts to execute
Syntax: Transition-delay
Units in seconds or milliseconds
5, unified set transition effect
Property:
Transition
Used to set four transition sub-properties
Transition:transition-property transition-duration transition-timing-function Transition-delay;
transition:width 2s linear 0s;

Transition:prop Dura Timing delay;
4. Trigger the Transition
The transition effect is triggered by the user's behavior (click, hover)
4. Multiple transition effects
TRANSITION-PROPERTY:PROP1,PROP2;
Transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
Transition-delay:delay1,delay2;
2. Animation
1. What is animation
To run multiple states of an element together (transitions between multiple states)
Transition: Achieve simple dynamic effects
Animations: Implementing Complex dynamic effects
Note: Browser compatibility
Chrome and Safari:-webkit-
Firefox:-moz-
Opera:-o-
Steps to implement animations:
1. Declaring animations
@keyframes
Declare what different states are in the entire animation process
2. Call Animation
Calling declared animations via the animation property
2. Key frame
Syntax: @keyframes rule Declaration animations
<style>
@keyframes Animation Name {
/* Define keyframes as animation states at different points of time */
from | 0%{
/* Start State of animation (style) */
}
/*... Several key frames */
20%{
/* The State (style) of the animation at the time of execution to 20% */
}
25%{

}
26%{

}

to | 100%{
/* Status at end of animation (style) */
}
}

@-webkit-keyframes changeback{

}
@-moz-keyframes changeback{

}
@-o-keyframes changeback{

}
</style>
3. Animation properties (call)
1, Animation-name: Call the name of the animation, specify the name of the @keyframes
2, Animation-duration: Animation is performed often with s or MS
3. Animation-timing-function: Speed effect when animation is executed
Value Ease,linear,ease-in,ease-out,ease-in-out
4, Animation-delay: Delay time, in s or MS units
5, Animation-iteration-count
Number of times the animation was executed
Value:
1. Specific values
2, Infinite: Unlimited plays
6, Animation-direction: Animation playback Direction
Value:
Normal
Alternate:
Odd number of plays for positive playback (state from from-to)
Even several times play for reverse playback (state from To-from)
7, animation comprehensive properties: Animation
Ainimation:name Duration timing-function delay iteration-count direction;
ainimation:second 2s linear 2s infinite;
8, Animation-fill-mode
Specify the effect of the animation before or after playback
None: Default behavior
Forwards: When the animation is complete, keep the last state
Backwards: Before the animation is displayed, remain in the first state
Both: After the animation is complete, the animation is displayed before it is maintained by the corresponding state.

9, Animation-play-state
Define animation playback Status
Use with JavaScript to pause animations during playback
Value:
Paused: Pause
Running: Play

Common CSS3 Animation styles