Transition, animation and Transform are three important animation properties in CSS3. This article focuses on learning about them.

A, the transition

Transition Allows CSS attributes to transition smoothly over a period of time. This effect can be triggered with a mouse click, a focus, a click, or any change to an element, and smoothly animates the CSS property values.

Transition: the transition - property | | the transition - duration | | the transition - the timing - function | | the transition - delay;Copy the code

Transition contains four main attribute values: transition-property for transformation, transition-duration for transformation, and rate change for transformation during the duration: Transition-timing -function: transition-delay.

1. transition-property

transition-property: none || all || property;
Copy the code

Transition-property specifies that the transition effect is performed when one of the elements properties changes.

None: No properties get transition effects;

All: All attributes are transitioned, which is the default;

Property: A comma-separated list of CSS property names that define the transition effect.

2. transition-duration

transition-duration: time;
Copy the code

Transition-duration specifies the duration of the transformation process. Time is a value in seconds or milliseconds. The default value is 0, indicating that the transformation is immediate.

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);
Copy the code

The meanings of the preceding values are as follows:

value describe
linear Specify the transition effect from beginning to end at the same speed.
ease Define the transition effect of starting slowly, then getting faster, then finishing slowly.
ease-in Specify the transition effect of a slow start.
ease-out Specify the transition effect of ending at a slow speed.
ease-in-out Specify the transition effect of a slow start and finish.
cubic-bezier(n.n.n.n) Define your own values in the Cubic – Bezier function. Possible values are between 0 and 1.

4. transition-delay

transition-delay: time;
Copy the code

Transition-delay specifies how long it takes for an animation to start executing after an element attribute is changed. Time is a value in seconds or milliseconds. The default value is 0.

Example 5.

The HTML code

<div class="one"></div>
Copy the code

CSS code

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        -webkit-transition: width, height 2s ease;
        -moz-transition: width, height 2s ease;
        -ms-transition: width, height 2s ease;
        -o-transition: width, height 2s ease;
        transition: width, height 2s ease;
    }

    .one:hover {
        width: 300px;
        height: 300px;
    }
Copy the code

Effect:

6. Precautions

  • Not all CSS properties are supportedtransition, complete list viewhere, and specificThe effect.
  • transitionIn order to calculate the intermediate state, you need to know exactly what the starting and ending states are. For example, if the height changes from 0px to 100px,transitionWe can figure out the intermediate state. However,transitionThere is no way to compute the intermediate state between 0px and auto, that is, if you start or end with height: auto, no animation will occur.
  • transitionIt needs to be triggered by an event, so it can’t happen automatically when the page loads.
  • transitionIt’s a one-off, it can’t happen again unless it’s triggered again and again.

Second, the animation

Unlike Transition, which can only define the first and last two states, animation can define as many keyframes as it wants, thus achieving more complex animation effects.

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction
Copy the code

Animation mainly contains six attributes, with specific meanings as follows:

value describe
animation-name Specifies the name of the KeyFrame to bind to the selector.
animation-duration Specifies the time, in seconds or milliseconds, to complete the animation.
animation-timing-function Specifies the speed curve of the animation.
animation-delay Specifies the delay before the animation starts. Default is 0.
animation-iteration-count Specifies the number of times an animation should play. The default value is 1.
animation-direction Specifies whether the animation should be rotated backwards. The default is forward.

1. keyframe

Before we introduce animation in detail, we need to introduce KeyFrame.

@KeyFrames allows developers to control the middle of a CSS animation by specifying the keyframe styles (or pauses) that must be displayed at certain points in the animation. This allows the developer to control more of the details of the animation rather than letting the browser handle them automatically.

To use keyframes, create a named @keyframes rule so that the specified @keyframes can be called later using the animation-name attribute. Each @Keyframes rule contains multiple keyframes, that is, a style block statement, and each keyframe is named by a percentage value that represents the stage in the animation at which the style contained in that frame is triggered.

There is no order in which keyframes are written, and they are only fired in ascending order based on percentage.

@keyframes animationname {keyframes-selector {css-styles; }}Copy the code

The specific meanings are as follows:

value describe
animationname A necessity. Defines the name of the animation.
keyframes-selector A necessity. Percentage of animation time. Valid values: 0-100%from (same as 0%) to (same as 100%)
css-styles A necessity. One or more valid CSS style properties.

Example:

@keyframes identifier {
  0% { top: 0; left: 0px50%} {top: 30px; left: 20px; 100%} {top: 0; left: 30px;}
}
Copy the code

Example 2.

The HTML code

<div class="one"></div>
Copy the code

CSS code

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        position: relative;
        animation: moveHover 5s ease-in-out 0.2 s;

    }


    @keyframes moveHover {
        0% {
            top: 0px;
            left: 0px;
            background: #cd4a48; 50%} {top: 200px;
            left: 200px;
            background:#A48992; 100%} {top: 350px;
            left:350px;
            background: #FFB89A; }}Copy the code

Effect:

3. Other attributes

In addition to the six main attributes mentioned above, two additional attributes will be introduced.

animation-fill-mode

Immediately after the animation ends, it jumps from the end state back to the start state. If you want to keep the animation in the end state, use the animation-fill-mode property.

animation-fill-mode: none || backwards || both
Copy the code
  • None: Defaults to the state before the animation started.
  • Forwards: When the animation is finished, hold the last property value (defined in the last keyframe).
  • Backwards:animation-delayThe specified period of time during which the start property value (defined in the first keyframe) is applied before the animation is displayed.
  • Both: according to theanimation-directionForwards and forwards rules applied in rotation.

animation-play-state

Sometimes, the animation will stop suddenly in the middle of playing. At this point, the default behavior is to jump back to the beginning of the animation.

If you want to keep the animation as it was when it suddenly terminated, use the animation-play-state property.

animation-play-state:running || paused
Copy the code

Animation-play-state is mainly used to control the playback state of the element animation. It has two main values, RUNNING and paused, where running is the default. Paused an animation that was being played, and restarted an animation that was paused by running, an attribute that is currently not supported by the kernel.

Third, the transform

Transform consists of rotate, skew, scale, translate and matrix.

transform: none || transform-functions
Copy the code

None: indicates no transformation. Transform-function represents one or more transform functions, separated by Spaces; In other words, we operate multiple transform properties on the same element simultaneously, such as rotate, scale, and Translate.

The main transform-function transformation functions are as follows:

1. translate

value describe
translate(x.y) Define 2D transformations.
translate3d(x.y.z) Define 3D transformations.
translateX(x) Define the transformation, just using the X-axis values.
translateY(y) Define the transformation, just using the Y-axis value.
translateZ(z) Define the 3D transformation using only the z-axis values.

2. scale

value describe
scale(x.y) Define 2D scale transformations.
scale3d(x.y.z) Define the 3D zoom transformation.
scaleX(x) Define the scale transformation by setting the value of the X axis.
scaleY(y) Define the scale transformation by setting the Y-axis value.
scaleZ(z) Define the 3D scale transformation by setting the z-axis value.

3. rotate

value describe
rotate(angle) Define 2D rotation, specifying angles in parameters.
rotate3d(x.y.z.angle) Define 3D rotation.
rotateX(angle) Defines a 3D rotation along the X axis.
rotateY(angle) Define 3D rotation along the Y-axis.
rotateZ(angle) Define 3D rotation along the Z axis.

4. skew

value describe
skew(x-angle.y-angle) Defines 2D skew conversions along the X and Y axes.
skewX(angle) Defines a 2D tilt transformation along the X axis.
skewY(angle) Define a 2D tilt transformation along the Y-axis.

5. transform-origin

The default reference point for the above changes is the center point of the element, but you can set the reference point of the element with transform-Origin.

transform-origin: X || Y || Z
Copy the code

Where X, Y, and Z correspond to three-dimensional coordinates, the values of X, Y, and Z can be em, px. In addition, X, Y can be hundred values, where X can also be character parameter values left, center, right. Y, like X, can also be set to top, center, bottom.

I won’t write any concrete examples; there are more cases and it’s easier to implement.

Four,

The above are the three properties of CSS3 animation, the content is relatively basic, but very useful. Only need CSS, you can achieve some relatively simple animation effects, eliminating the complex JS code.