Getting Started with CSS3 Animation in 10 Minutes

Introduction

Animation allows you to easily implement various animation effects on web pages using pure CSS without relying on javascript or jquery.

compatibility

Animation is well supported in most major browsers! Students who are still compatible with IE9 should use it with caution.

CSS Coordinate System

Before understanding animation, we need to understand the CSS coordinate system first, because many animation effects are closely related to the coordinates of elements. In CSS3, a web page is no longer a two-dimensional plane, but a three-dimensional space. The horizontal direction, vertical direction, and perpendicular screen direction correspond to the x, y, and z axes of the three-dimensional coordinate system, respectively, as shown in the figure below. The arrow direction is positive, and the opposite is negative (note that the y-axis direction is opposite to the conventional Cartesian coordinate system).

Animations

1. Transforms

Transform is translated into “conversion” in Chinese, but I prefer to call it “deformation” (the famous Transformers are called transformers). We can use the transform function to make HTML elements produce various deformations, such as translation, scaling, rotation, distortion, etc., without affecting the normal document flow.

(1) Translate

Translate is generally translated as "translation", but it is generally used as "translation" in CSS, because translate is used to change the position of HTML elements in the 3D coordinate system. Translate supports moving in any direction within the coordinate system (through any combination of vectors in the x, y, and z directions). The units can be length units and percentages (the percentage is relative to the size of the element being translated, the x axis is relative to the width, the y axis is relative to the height, and in the z direction, since the element has no 'thickness', the z direction cannot be expressed in percentages). For example:

transform: translateX(100px) translateY(50%) translateZ(-100px);
// Or abbreviate transform: translate3d(100px, 50%, 2em);

Notice:

translate is a 2D translation in the xy plane, translate3d is a 3D translation in the xyz space;

translate can also be written alone, such as translate: 50% 105px 5rem; , but this feature is still in the experimental stage and many browsers do not support it, so at this stage it is still used in conjunction with transform . See MDN translate for details.

(2) Scale

Scale means "zoom", as the name suggests, it is used to change the size of an element. For example:

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// Or abbreviate transform: scale3d(2, 0.5, 1);

scale method accepts any number (positive or negative integers, decimals, 0) as a parameter, which is the scaling factor. If the factor > 1, the effect is magnification; if 0 < factor < 1, the effect is reduction; if the factor = 0, the element size becomes infinitely small and invisible; if the factor < 0, the effect is a mirror image of the value > 0 (you can experiment with the specific effect yourself).

Similar to translate , scale also has two-dimensional scale() and three-dimensional scale3d() , which can also be written separately and are not described here.

(3) Rotate

Rotate means "rotate", and supports rotating elements around the x, y, and z axes. The positive direction of rotation is counterclockwise facing the positive direction of the coordinate axis. Please refer to the coordinate system diagram above. The rotate method accepts an angle as a parameter. An angle > 0 rotates in a positive direction, and an angle < 0 rotates in a negative direction. For example:

// Default rotation around the z-axis transform: rotate(90deg);
transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

Unlike translate and scale, rotate cannot be abbreviated as transform: rotate3d(30deg, 60deg, 90deg) . The usage of rotate3d is: the first three parameters are numbers, representing vectors in the x, y, and z directions, which are added to get vector v. The fourth parameter is the angle, which represents the angle of counterclockwise rotation around vector v. The syntax is as follows:

transform: rotate3d(1, 2, 3, 90deg);

Similar to translate and scale , rotate can also be used as a separate CSS property, but it is still in the experimental stage.

For space considerations, I only list the three most commonly used transform functions. For the remaining transform functions, please refer to MDN transform function.

(4) Combination

We can combine different transform methods, such as:

transform: translateY(200px) rotateZ(90deg) scale(3);

The execution order of the combined method is from right to left, that is, scale is executed first, then rotate, and finally translate, and the effects are cumulative. The order in which the methods are written has a great impact on the final effect. Look at the following example, the translation and zooming along the y-axis produce significantly different results in different orders:

If you translate first and then scale, the translation distance will also be scaled proportionally, but if you scale first and then translate, this will not happen. Therefore, when using transform, you need to write it in the order of translate -> rotate -> scale . Let scale be executed first to avoid amplifying the effect of translate, and rotate is executed before translate to prevent rotation with the translation distance. I think this is the inconvenience of transform at present, because the interference between methods is not easy to understand, and the writing order is not easy to remember. In the future, it is expected that this problem will be solved by using independent CSS transform properties, because independent transform properties have no dependence on the writing order and the methods will not interfere with each other.

Transition

Transition is translated as "transition", emphasizing the process. In CSS, it refers to the dynamic process of an element transitioning from one state (corresponding to a CSS attribute) to another state within a period of time. We can decide how to make the transition and how much time to spend.

For example, to make the cloud bigger when the mouse hovers over it, we can write:

.cloud{
    width: 240px;
    transition: 1s;
}
.cloud:hover{
    width: 320px;
}

Effect:

Transition can be used in conjunction with transform. For example, we can make the cloud grow bigger and rotate at the same time:

.cloud:hover{
    width: 320px;
    transform: rotate(360deg);
}

Effect:

We can set different transition times for different effects:

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s;
}

We can also set a delay time for the effect, for example, we wait until the width increases before rotating:

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s 1s;
}

Effect:

We can also set a different timing function for each effect to control the acceleration effect.

For example, we can gradually increase the rotation speed:

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

Effect:

More timing functions will be discussed later, and you can also refer to MDN transition-timing-functions

Keyframes

(1) Basic usage

Keyframe is translated into Chinese as "key frame". It is a very powerful function in animation. In layman's terms, we can create animations by defining key points and key states in an animation. Keyframes have stronger control over the animation process and details than transitions.

Let's look at an example first (some code omitted)

html:

<div class="sky"></div>
<div class="grass"></div>
<div class="road">
  <div class="lines"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated">
</div>

CSS:

.mario{
  position: absolute;
  left: 0px;
  width: 100px;
}

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(0) }
  to{ transform: translateX(700px) }
}

Effect:

drive is the name of the keyframes, from, to are the starting and ending time of the keyframes playback process. The time point can also be expressed in percentages, such as 50% , from， to are equivalent to 0%, 100% . Each time point corresponds to a CSS state, representing a keyframe. After the keyframes are defined, the usage is as follows:

Animation also has a short form, such as:

animation: slidein 3s ease-in 1s infinite reverse both running;

However, this method has certain requirements on the writing order (delay must be written after duration, there is no order requirement for other parameters, and CSS will recognize them through the passed in keywords).

(2) Animation Delay

With animation-delay , we can delay the animation execution:

animation-delay: 2s;

(3) Animation Fill Mode forwards

In the example above, you can see that Mario moves to the right and then returns to the starting point. What if we want him to stay on the right after completing the movement? It's very simple, we just set the annimation fill mode:

animation-fill-mode: forwards

forwards means that after the animation is completed, the element will remain in the state of the last frame.

backwards

In contrast, there is backwards , backwards means that the element does not return to the state of the first frame after the animation is completed. Instead, it means that when animation-delay is set, the state of the first frame is immediately applied to the element during the waiting process before the animation starts. Let's modify the above example slightly to see the effect:

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-fill-mode: backwords;
  animation-delay: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(350px) }
  to{ transform: translateX(700px) scale(2) }
}

Effect:

As you can see, the man moves to 350px immediately before the animation starts, and the animation starts 1s later.

both

Obviously, both will apply both forwards and backwards rules at the same time, that is, the state of the first frame is applied first during delay, and the state of the last frame is kept at the end.

(3) Animation Repeat

We can set the number of times the animation loops through animation-iteration-count , for example:

animation-iteration-count: 3;

// Infinite loop animation-iteration-count: infinite;

Like this:

(4) Animation Direction

normal

Normal direction, which is also the default direction, is from first, then to.

reverse

Opposite to the normal direction, that is, to first, then from. For example:

.animated{
  ...
  
  animation-direction: reverse;
}

@keyframes drive {
  from{ transform: translateX(-100px) rotateY(180deg) }
  to{ transform: translateX(862px) rotateY(180deg)}
}

Effect:

alternate

Alternate means "alternating", that is, normal and reverse alternate, first normal and then reverse.

reverse alternate

Alternate in reverse direction, first reverse and then normal.

(4) Animation Timing function

Like transitions, keyframes can also set timing functions. Commonly used timing functions are summarized as follows:

• ease: The default method, which starts out slow, then accelerates and then decelerates
• ease-in: The initial speed is the slowest, and then it accelerates
• ease-out: The initial speed is the fastest, and then it keeps slowing down
• ease-in-out: The initial speed is slow, then accelerates and decelerates. The difference from ease is that the acceleration and deceleration process is symmetrical
• Linear: Constant speed motion

The intuitive representation is as follows (codepen):

In addition to the above ready-made methods, we can customize the speed curve through the Bezier curve. We can create our own Bezier curves visually at http://cubic-bezier.com. For example, create a curve that starts very slow and then suddenly becomes very fast:

css:

animation-timing-function: cubic-bezier(1,.03,1,-0.03);

Effect:

Isn’t it amazing!

(5) Chain Animation

We can use multiple animations in series. For example, if we want the little man to jump while driving, we can write it like this:

css:

.mario {
  ...
  
  animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;
}

@keyframes jump {
  0% { top: -40px; }
  50% { top: -120px; }
  100% { top: -40px; }
}

Effect:

practice

The purpose of this article is to popularize the basics of CSS3 animation. It does not fully cover the knowledge of animation. Please forgive me for not involving or explaining the knowledge. After mastering the above knowledge, we can already use animation to create rich animation effects. Here are some small examples on codepen:

full mario demo

animated popup

fly items to shopping cart

Flipping cards

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.