CSS3 innocently divided transition, transform and animation

• Transition

Transition allows the CSS property values to smoothly transition within a certain timeframe, with the following syntax:

Transition:transition-property transition-duration transition-timing-function transition-delay [, ...]

1. Transition-property
   Used to specify the property that performs the transition effect, either none , all or a specific property.
2. Transition-duration
   The duration of the animation execution, in s（秒） or ms（毫秒） .
3. Transition-timing-function
   Transform rate effect, optional value is ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时间曲线） .
4. Transition-delay
   Used to specify the time at which the animation starts executing, with the same value transition-duration , but can be negative.

• Transform

Transform is divided into 3D and three, here for the time being only the more commonly used 2D transform, which mainly consists of the following transformations: rotation rotate, twisted skew, scaled scale and moving translate, and matrix deformation matrices, The syntax is as follows:

Transform:rotate | Scale | Skew | Translate |matrix;

Rotate rotation

The rotate is a deg 度 positive number indicating a clockwise rotation and a negative number for counterclockwise rotation.

Scale Scaling
The value range for scale is 0~n less than when it is smaller 1 , and vice versa. For example, the scale(0.5, 2) horizontal direction is reduced by 1 time times, the vertical direction is enlarged by 1 time times, or it can be scaleX set in scaleY One Direction.

Skew Twist
Skew's units are the rotate same deg 度 . For example skew(30deg, 10deg) , it indicates a horizontal tilt of 30 degrees and a vertical tilt of 10 degrees.

Translate offset
Offsets also include horizontal and vertical offsets. translate(x,y)move horizontally and vertically (that is, the X and Y axes move simultaneously), move translateX(x) horizontally (x-axis) only, and translateY(Y) move vertically (Y-axis movement).

• Animation

CSS3 in the animation is controlled by a call, Keyframes 关键帧 his name is "@keyframes" beginning, followed by the "name of the animation" plus a pair of curly braces "{}", in parentheses is a number of different time-period style rules, Sort of like our CSS style. For a style rule in a "@keyframes" is made up of a number of percentages, such as "0%" through "100%", the syntax is as follows:

@keyframes IDENT {from  {    properties:properties value;  }  Percentage {    properties:properties value;  }  To {    properties:properties value;  }} Or all written in percent form: @keyframes IDENT {  0% {    properties:properties value;  }  Percentage {    properties:properties value;  }   100% {    properties:properties value;  }}

Animation and transition have their own corresponding properties, then there are several main animation in the following: Animation-name;animation-duration; Animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state. Some of these properties are explained below:

• • Animation-name Key frame Name
    Used to define the name of an animation, that is, the animation name created by the previous, the keyframes default is none , when the value is, none there will be no animation effect. If we want to attach animation a few to an element at the same time, just separate it with a comma , .
  • Animation-iteration-count Animation cycle times
    The default is 1 , if you want to make an infinite loop, just set it to true infinite .
  • Animation-direction the direction of animation playback
    It has only two values, the default is normal , if set to normal, each cycle of the animation is played forward, and the other value is that the alternate animation plays forward in an even number of times, and the odd number plays in the opposite direction.
  • Animation-play-state Playback Status
    Its main has two values, running and paused, where running is the default value. You can stop the animation that is playing by paused, or you can replay the paused animation by running. This property is not commonly used.

DEMO 1

DEMO 2

DEMO 3

CSS3 innocently divided transition, transform and animation