Analysis of Web Animation Principles and Techniques

In terms of web animation, there is a set of very classic principles- Twelve basic principles of animation , which is the 12 basic principles of animation (also known as Disney Animation Principles), and articles on its interpretation and extension on the Internet are also very Much:

• Animation Principles for the Web
• [[Translation] Twelve Principles of Web Animation] ( https://cssanimation.rocks/cn/principles/)

The demo used in the example is relatively simple and easy to understand, but it does not reflect how it should be used flexibly in actual production. Today, this article will take everyone to review and review again, and replace the most basic DEMO, with some very practical and very cool animation DEMO effects today.

Squash and stretch - Squash and stretch

The purpose of squeezing and stretching is to give weight and flexibility to the drawn objects. It can be applied to simple objects, such as bouncing balls, or more complex structures, such as the muscle tissue of the human face.

When applied to animation, the most important aspect of this principle is that the volume of an object does not change when it is squeezed or stretched. If the length of a ball is stretched vertically, its width (three dimensions, as well as its depth) needs to shrink horizontally accordingly.

Looking at the picture above, it is clear that the trajectory on the right is much more real than the one on the left.

The principle animation is as follows:

Some of the more interesting web animation demos are similar:

CodePen Demo -- CSS Flippy Loader 🍳 By Jhey

Look carefully at the loading animation above. Each block will have a compression preparation before jumping. During the compression process, the height becomes lower and the width becomes wider. This is extrusion and stretching, making the animation look more realistic.

OK, look at two similar effects again to deepen the impression:

CodePen Demo -- CSS Loading Animation

CodePen Demo -- CSS Animation Loader - Jelly Box

To summarize briefly, the core of squeezing and stretching is to keep the volume of the object consistent. When the element is stretched, its width needs to be thinner, and when the element is squeezed, its width needs to be wider.

Anticipation - preparatory action

The preparation action is used to prepare for the main animation action and make the action look more realistic.

For example, a dancer who jumps from the floor must bend his knees first, and a golfer who swings must swing the club backwards first.

The principle animation is as follows, you can see some preparatory actions before scrolling:

Take a look at some practical application of chang scenes, the following animation effect:

CodePen Demo -- Never-ending box By Pawel

The ball rolls upwards, but if you look closely, it will swing backwards every time you roll upwards. It can be understood as a charge-up action, which is what we call a preparation action.

Similarly, take a look at this shopping cart animation and use a lot of small tricks. One of them is that the car will move back a little bit before charging forward to perform a charging action. The whole animation feels obviously different. It makes The animation looks more natural:

Staging - performance layout

Staging means the layout of the performance. Its purpose is to guide the audience's attention and clarify what is most important in a scene.

It can be done in a variety of ways, such as placing characters in the screen, using light and shadow, or the angle and position of the camera. The essence of this principle is to pay attention to the core content and avoid other unnecessary details to attract the user's attention.

The principle animation is as follows:

The effect of the above Gif schematic is not obvious, take a look at the example effect:

CodePen Demo -- CSS Loading Animation

The core of this technique is to highlight the main body during the animation process, and to weaken the effect of non-subject elements through blurring, lightening, etc., to reduce the user's attention on it.

Straight-Ahead Action and Pose-to-Pose - continuous movement and posture correspondence

In fact, it means frame-by-frame animation and tween animation:

• FrameAnimation (frame-by-frame animation) : Combine multiple pictures for playback, you can use CSS Aniation Steps, the picture is composed of one frame, similar to a comic book
• TweenAnimation (tween animation) : Tween animation is to draw a key frame on a time frame. Unlike frame-by-frame animation, each frame is a key frame. Tween animation can draw a basic shape on a key frame. Then on the time frame, another key frame is transformed into another shape or another shape is drawn, and then the animation process in the middle is automatically generated by the computer.

This should be the most basic one, and it has different magical effects in different scenarios. In the process of realizing animation with CSS, the most used one should be tween animation, frame-by-frame animation is also very interesting, for example, a complex animation designed by a designer, using multiple pictures to splice into frame-by-frame animation is also very good.

Frame-by-frame animation and tween animation are suitable for different occasions. No one is better, only who is more suitable. Compare the following two clock animations. One of the second hand uses frame-by-frame animation, and the other is tween animation:

• The second hand of the clock uses a frame-by-frame animation:

CodePen Demo -- CSS3 Working Clock By Ilia

• The clock second hand uses tween animation:

CodePen Demo -- CSS Rotary Clock By Jake Albaugh

Sometimes some complex animations cannot be implemented directly using CSS, and a frame-by-frame effect will be used to approximate a tween animation, such as Apple’s headset animation, which is actually a frame-by-frame animation, but it looks continuous:

CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen

Here is actually a quick carousel of multiple pictures, each picture represents a key frame.

Follow through and overlapping action

Following and overlapping actions are the general term for two closely related techniques, which help to render the movement more realistically and help to give the impression that the elements of the movement follow the laws of physics, including the principle of inertia.

• following means that after the character stops, the loosely connected parts of the body should continue to move, and these parts should continue to move beyond the point where the character stopped before being pulled back to the center of gravity or showing different degrees of oscillation damping;
• overlapping action is the tendency of each part of the element to move at different speeds (the arm will move at different times of the head, etc.);
• The third related technology is drag , the element starts to move, and part of it takes a few frames to catch up.

To create a feeling of overlapping actions, we can make the components move to each place at slightly different speeds. This is a very good method used in the window transition of the iOS system. Some buttons and components move at different rates, the overall effect will be more realistic than everything moving at the same rate, and allow time for visitors to properly understand the changes.

Principle diagram:

Take a look at the shopping cart animation below, and look at the shopping cart carefully. During the process of moving to a stop, there is an obvious feeling of braking and then pulling back. The following effect is used here to make the animation more vivid and real:

Slow In and Slow Out - Slow in and slow out

The movement of objects in the real world, such as human bodies, animals, vehicles, etc., takes time to accelerate and decelerate.

For real motion effects, its easing function must not be Linear. For this reason, movement is often accelerated gradually and slowed down before stopping, achieving a slow-in and slow-out effect to get closer to more realistic movements.

Schematic diagram:

This is still easy to understand. In the real world, few easing functions are linear motions.

Arc - arc movement

Most natural actions tend to follow an arched trajectory, animation should follow this principle, follow the implicit arc to obtain a greater sense of reality.

Principle diagram:

Hmm, in many animations, using arcs instead of straight lines can make the animation more realistic. Take a look at the following firework particle animation:

CodePen Demo -- Particles, humankind's only weakness By Rik Schennink

The entire firework particle animation looks very natural, because the falling of each particle follows the law of free fall, and their trajectories are arcs instead of straight lines.

Secondary Action - secondary action

Adding a secondary action to the main action can make the scene more vivid and help support the main action. People who walk can simultaneously swing their arms or put their arms in their pockets, talk or whistle, or express emotions through facial expressions.

Principle diagram:

For a simple application example, take a look at the following animation:

CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram

A picture of a submarine swimming forward is realized here, and the animation itself has many areas that can be optimized. But there are also some things worth learning about. The animation uses the tail rotor rotation and the movement of bubbles and underwater scenery.

At the same time, it is worth noting that the reflection of the window is also a small detail, indicating that the hull is moving. This is a secondary action that sets off the movement of the main body.

Take a look at the following print animation. The up and down of the keys on the keyboard simulate the click effect. In fact, it is also a secondary action to set off the main animation effect:

![Secondary Action - CodePen Home
CSS Typewriter](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caba8cab25294c278f0e90cd4d640845~tplv-k3u1fbpfcp-zoom-1.image)

CodePen Demo -- CSS Typewriter By Aaron Iker

Timing - Time rhythm

Time refers to the number of drawings or frames for a given action, which is transformed into the speed of an animation action.

On a purely physical level, correct timing will make objects appear to obey the laws of physics. For example, the weight of an object determines its response to propulsion, because a lighter object will react faster than a heavier object.

The same animation is displayed at different speeds, and its effects are often very different. For web animation, you may only need to adjust the value of animation-duration or transition-duration

Principle diagram:

It can be seen that the same animation, different easing functions, or given different times can produce very different effects.

Of course, time rhythm can be used in many places, such as in some Loading animations:

CodePen Demo -- Only Css 3D Cube By Hisami Kurita

Or is it like this, the same animation, at different rates:

CodePen Demo -- Rotating Circles Preloader

It can also be the same delay, the same rate, but in different directions:

CodePen Demo -- 2020 SVG Animation By @keyframers

Exaggeration - exaggeration

Exaggeration is a particularly useful effect for animation, because an animation that strives to perfectly imitate reality may seem static and dull.

A certain degree of restraint is important when using exaggeration. If a scene contains multiple elements, the relationship between these elements should be balanced to avoid confusing or frightening the audience.

Principle diagram:

OK, different levels of display have different sensory effects. Compare the following two fault art animations:

Slight shaking failure:

Severe shaking failure:

CodePen Demo -- Glitch Animation

It can be seen that the second animation clearly feels a more serious fault than the first one.

Too much realism can ruin the animation, or make it unattractive, making it appear static and boring. Instead, add some exaggeration to the element objects to make them more dynamic and make them more eye-catching.

Solid drawing - solid drawing

This principle means that our animation needs to respect the authenticity. For example, a 3D three-dimensional drawing needs to consider the form of the element in the three-dimensional space.

Understand and master the basic knowledge of three-dimensional shape, anatomy, weight, balance, light and shadow, etc. Help us draw more realistic animation effects.

Principle diagram:

Take a look at the following animation, called Close the blinds - close the blinds:

CodePen Demo -- Close the blinds By Chance Squires

When hovering, there is a closing animation, using multiple divs to simulate the falling of the blinds, and at the same time coordinating the process of the background color from bright to dark, making good use of the color, light and shadow auxiliary animation display.

Take a look at this small animation of the pendulum, which also uses light and shadow and perspective elements very well:

CodePen Demo -- The Three-Body Problem By Vian Esterhuizen

The last Demo, although it was implemented using CSS, also restored the shape of the paper flying in reality as much as possible, and made certain changes to the shadow changes under the paper:

CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers

Good animation, the details can withstand scrutiny.

Appeal - attractive

Unusually, exquisite details can often attract users' attention very well.

Attraction is the characteristic of works of art, and how to achieve attractive works requires constant experimentation.

Principle diagram:

I think this point may be the core of Web animation, an attractive animation, it must have certain characteristics, let us appreciate it together.

CodePen Demo -- Download interaction By Milan Raring

Through a series of actions, the animation expands, the arrow moves, the progress bar fills up, and the number changes, a download animation is displayed very nicely, and the waiting process does not feel boring.

Let's take a look at the effect of this video playback:

CodePen Demo -- Video button animation - Only CSS

Zoom in through a mask hover, and then click on the full screen to change the user's attention at once.

Some common misunderstandings of web animation

Of course, some of the above techniques are derived from the Disney Animation Principle , and we can apply some of these ideas to the design of our Web animation.

However, it must be pointed out that when Web animation itself is used, there are some principles that we need to pay attention to. The main points are as follows:

• Enhance the correlation between animation and page elements
• Don’t animate for the sake of animation, be purposeful
• The animation should not be too slow, otherwise it will hinder the interaction

Enhance the correlation between animation and page elements

This is a common problem. It is often seen that some animations are not related to the subject. The logic behind the relevance can help users understand the changes that have just occurred in the interface layout and what caused the changes.

A good animation can effectively connect multiple links or scenes on the page.

Compare the following two animations, the second one is more relevant than the first one:

Not strongly related:

Relevant:

Obviously, the second animation allows users to understand the changes on the page better than the first animation.

Don’t animate for the sake of animation, be purposeful

This is also very important. Don't animate for the sake of animation, but have a purpose. In many cases, animations on many pages are very inexplicable.

Emm, to put it simply, is simply an animation that exists for the sake of showing off skills. This kind of animation can exist in your Demo, your personal website, but it is not suitable for online business pages.

The use of animation should have a clear purpose. For example, Loading animation can allow users to perceive that the page is changing and content is being loaded.

In our interaction process, proper addition of transitions and animations can make users perceive the changes of the page. There are similar scrolling animations. Silky scrolling switching is obviously a better experience than obtrusive content.

The animation should not be too slow, otherwise it will hinder the interaction

Slow animation, it produces unnecessary pauses.

Some users will frequently see their transition animations, so keep them as short as possible. Keep the animation duration at 300ms or less.

Comparing the following two animations, the user may be refreshed for the first time, but if the user frequently performs operations during the browsing process, the excessively long transition animation will consume a lot of unnecessary time for the user:

Long transition animation:

Shorten the transition animation time and keep the appropriate duration:

Creative interactive animation combining products and business

This is more interesting. I personally think that Web animation is so good that it can very well improve user experience and enhance brand value.

Creative animations that combine products and businesses need to be explored, polished, and iterated. For example, the BiliBili official website that everyone talks about, its top banner, in conjunction with some festivals and activities, often has some interesting creative interactive animations. Just look at two:

And this:

I have seen people discussing Bilibili's top banner animation in different places many times, and it can be seen that its animation is successful. It is a good combination of festivals, facts, and hot spots, and it becomes a relatively fixed product to continuously introduce new ones and give users a different experience at different times.

Consider the cost-effectiveness of animation

The last one is that although the animation is good, it is very time-consuming to polish a high-quality animation, especially now that many products and businesses are under a kind of agile development iteration.

A good Web animation is not the work of one person at the front end from conception to implementation. It requires the public efforts of related personnel such as product, design, front end, etc., and continuous modification can finally present a better effect. So at the beginning of the project, you must consider the cost-effectiveness. Is it really worth spending a few days for a Web animation? Of course this is a very different question.

Reference article

• Schematic source - Understand Disney's 12 principles of animation
• Animation Principles for the Web
• [[Translation] Twelve Principles of Web Animation] ( https://cssanimation.rocks/cn/principles/)
• Twelve basic principles of animation
• functional animation design: excellent transition effects

At last

It is not easy to use Web technology to draw lively and interesting animations, especially in the current domestic environment, few people will study animation principles and apply them in practical production. But it is indeed a very interesting and technical thing in itself. I hope that this article can bring some improvement and help to everyone's understanding of Web animation, and use it more or less in the follow-up work.

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my public - 160d29cbf05d3c iCSS front-end interesting 160d29cbf05d3e 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.