Before CSS3, animations were done by dynamically changing the style attributes of elements in JavaScript, which could be animated, but had some performance problems. With the advent of CSS3, animation becomes easier and performance is better. CSS3 has three style properties for animation: transform, Transition, and animation.

transform

Rotate, scale, skew, translate, and matrix. The syntax is as follows:

. The transform - class {transform: none | < the transform function - > [< transform - function >] *}Copy the code

None means no transformation;
represents one or more transform-functions. The transform-function consists of the function name and the parameters, which are enclosed in () and separated by Spaces, for example:

Transform-class {transform: rotate(30deg) scale(2,3); }Copy the code

The transform – origin basis points

All transformations are based on base points, which default to the element’s center point. Transform-origin: (x, y), where x and y can be percentages, REM, px, etc., and can also be represented by positional words such as: x can be left, center, right; Y can be top, center, or bottom.

.transform-class {
    transform-origin: (left, bottom);
}
Copy the code

The rotate rotating

Usage: rotate(< Angle >); Represents a rotation distortion of an element by a specified Angle, clockwise if positive or counterclockwise if negative, for example:

.transform-rotate {
    transform: rotate(30deg);
}
Copy the code

transform-rotate.png

Scale zooming

It has three uses: scale(

[,

]), scaleX(

), and scaleY(

); Represents horizontal and vertical scaling, horizontal scaling and vertical scaling respectively, and the input parameter represents the scaling ratio in horizontal or vertical direction. If the scale is greater than 1, it will be enlarged, and if it is equal to 1, it will be reduced.



. The transform - scale {transform: scale (2,1.5); } .transform-scaleX { transform: scaleX(2); }. Transform -scaley {transform: scaleY(1.5); }Copy the code

transform-scale.png

Translate the mobile

There are also three cases of movement: Translate (< translate-value >[, < translate-value >]), translateX(< translate-value >) and translateY(< translate-value >); Represents horizontal and vertical movement, horizontal movement and simultaneous vertical movement respectively. The movement unit is the length unit of CSS: PX, REM, etc.

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}
Copy the code

transform-translate.png

Skew distortion

Skew (< Angle >[, < Angle >]), skewX(< Angle >) and skewY(< Angle >); Also horizontal and vertical distortion, horizontal distortion and vertical distortion, the unit is Angle.

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}
Copy the code

transform-skew.png

matrix

Matrix deformation is relatively complex and involves Matrix calculation in mathematics. Interested students can study it: CSS3 Transform Matrix

transition

Transition is a style property that sets how smoothly a value transitions from one state to another. It has four properties:

  • Transition-property (transition-property); transition-property

  • Transition-duration; transition-duration;

  • Transition-timing -function

  • Transition-delay

    . The transition – class {the transition: [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*; }

transition-property

It is used to set which attribute changes will have the effect of smooth transition, mainly the following values:

  • None;

  • All;

  • Element attribute name:

    • Color;
    • Length;
    • The visibility.
    • .

    . The transition – property {the transition – property: none | | all [] [‘, ‘] *; }

transition-duration

It is used to set the duration of the conversion process, in s or ms. The default value is 0.

.transition-duration {transition-duration: <time> [, <time>]*; }Copy the code

transition-timing-function

It is used to set the speed of the transition effect, and it has six forms of speed:

  • Ease: gradually slow (default), equivalent to bezier curve (0.25, 0.1, 0.25, 1.0);

  • Linear: constant velocity, equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0);

  • Ease-in: acceleration, equivalent to Bezier curve (0.42, 0, 1.0, 1.0);

  • Ease-out: deceleration, equivalent to bezier curve (0, 0, 0.58, 1.0);

  • Ease-in-out: acceleration followed by deceleration, equivalent to Bezier curve (0.42, 0, 0.58, 1.0);

  • Cubic – Bezier: Custom Bezier curves.

    . The transition – timing {the transition – the timing – function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*; }

Bessel curve

transition-delay

This is used to set the time at which the transition animation starts execution, in either s or ms. The default value is 0.

. Transition-delay {transition-delay: <time> [, <time>]*; }Copy the code

transition

Transition-property, transition-duration, transition-timing-function, transition-delay

.transition {transition: <property> <duration> <timing function> <delay>; }Copy the code

animation

Animation is similar to frame-by-frame animation in Flash. Frame-by-frame animation is just like movie playback, with very delicate performance and great flexibility. While transition only specifies the start and end states, the entire animation process is controlled by specific functions. Those who have learned flash know that this kind of frame-by-frame animation is composed of keyframes. Many keyframes are continuously played to form animation. In CSS3, the animation is completed by the attribute keyframes.

@keyframes

@keyframes animationName { from { properties: value; } percentage { properties: value; } to { properties: value; } } //or @keyframes animationName { 0% { properties: value; } percentage { properties: value; } 100% { properties: value; }}Copy the code
  • AnimationName: animationName, named by the developer;
  • Percentage: indicates the percentage value. Multiple percentage values can be added.
  • Properties: The name of the style property, for example:color,left,widthAnd so on.

animation-name

It is used to set the name of the animation. Multiple animation names can be assigned at the same time, separated by, :

.animation {
    animation-name: none | IDENT[,none | IDENT]*;
}
Copy the code

animation-duration

This is used to set the duration of the animation, in s, with a default value of 0:

.animation {
    animation-duration: <time>[,<time>]*;
}
Copy the code

animation-timing-function

Similar to transition-timing-function:

.animation {
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}
Copy the code

animation-delay

This is used to set the start time of the animation, in either s or ms. The default is 0:

.animation {
    animation-delay: <time>[,<time>]*;
}
Copy the code

animation-iteration-count

Infinite sets the number of animation loops, default to 1, infinite sets the number of animation loops:

.animation {
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}
Copy the code

animation-direction

Alternate: Normal: forward; alternate: forward for the even number of times; alternate: backward for the odd number of times:

.animation {
    animation-direction: normal | alternate [, normal | alternate]*;
}
Copy the code

animation-play-state

It is mainly used to control the playback state of the animation: RUNNING means play, and paused means stop, running is the default value:

.animation {
    animation-play-state:running | paused [, running | paused]*;
}
Copy the code

animation

It is animation-name, animation-duration, animation-timing-function, animation-delay, animation-rotund-count, and animation-direct 3. Short for ion:

.animation {
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
Copy the code

Take a chestnut

To summarize

CSS3 animation properties transform, Transition, animation we have introduced the three properties of CSS3 animation. Transform can be understood as the geometric deformation of elements, which can be found regularly. Such deformation will not produce animation effect but only change the original shape. Transition and animation are a lot like tween and frame-by-frame animations in Flash; Transition is the transition from one state to another. When the transition is smooth, it creates an animation. It is a formulaic transition that we can use in regular animation effects, such as a spinning windmill, a driving car, a gradient of color, etc. The animation effect is more flexible, and it can realize complex and irregular animations like movies.