12 Principles of Web animation

As front-end designers and engineers, we use CSS to do the style, positioning and create a good looking site. We often use CSS to add the movement of the page to the transition effect or even animation, but we often do things do not exceed these.

Dynamic is a powerful tool that helps visitors and consumers understand our design. Here are some principles that can be applied to the fullest extent in our work.

Disney's Illusion of Life:disney Animation, published in 1981, published the 12 Principles of animation (principles of Animation) after a long cumulative period of basic work practice. These principles describe how animations can be used to convince viewers that they are immersed in the real world.

In this article, I'll cover each of these 12 principles and discuss how they can be used in Web pages. You can find all of their open source HTML and CSS code in Codepen.

Extrusion and stretching (squash and stretch)

This is the concept that the quality of the object exists and the mass remains unchanged when it is moving. When a ball is bouncing, hitting the ground will flatten out and the recovery time will be shorter.

The most useful way to create an object is to refer to objects such as people, clocks, and elastic balls.

This principle may be ignored when it works with Web Components. DOM objects are not necessarily related to the physical, and they scale on the screen as needed. For example, a button becomes larger and becomes an informational box, or the error message appears and disappears.

Still, the squeeze and stretch effect can add a sense of physical to an object. Even small changes in shape can create subtle but eye-catching effects.

Source code on the Codepen

Preparatory action (anticipation)

Exercise does not tend to happen suddenly. In real life, whether a ball begins to roll before it falls to the table, or a person's knees ready to jump, the movement usually has some sort of prior accumulation.

We can use it to make our transition animations look more realistic. The prep action can be a subtle bounce that helps people understand what objects will change and leave traces on the screen.

For example, when hovering over a component, you can zoom out slightly before it gets larger, adding additional entries to the initial list to introduce the removal of other entries.

Source code on the Codepen

Performance Layout (Staging)

The layout of the performance is to ensure that the object is focused in the scene, so that other objects and visions in the scene give way to the place where the active painting takes place. This means either putting the active painting in a prominent position or blurring the other components to keep the user focused on what they need to see.

In Web pages, one way is to cover some content with model. Add a mask to the existing page and show the main concerns in front of them.

Another method is to use the action. When a lot of objects are in motion, it's hard to know which ones are worth paying attention to. If all else stops, leaving only one in motion, even if it moves very weakly, it makes the object more susceptible to detection.

Another way to do this is to make a shaking and flashing button to simply suggest users such as they might want to save the document. The screen stays static, so the slightest movement is highlighted.

Source code on the Codepen

Continuous motion and gesture correspondence (straight-ahead Action and Pose-to-pose)

Continuous motion is the animation of each frame, the attitude is usually by a assistant in the definition of a series of key frames after the fill interval.

Most web animations use a gesture response: transitions between keyframes can make the animation smooth by inserting as many frames as possible between each key frame in the browser.

One exception is timed function ' step '. With this feature, the browser "steps" can clear as many unordered frames as possible. You can draw a series of pictures in this way and have the browsers display them sequentially, creating a frame-by-animation style.

Source code on the Codepen

Following and overlapping actions (Follow through and overlapping action)

Things don't always happen at the same time. When a car from the brakes to stop, the car will lean forward, smoke from the tires out of the car, the driver continued to rush forward.

These details are examples of following and overlapping actions. They can be used in Web pages to help emphasize what is stopped and will not be forgotten. For example, an entry may slip slightly farther while slipping, but it will correct itself to the correct position.

To create a feeling of overlapping movements, we can move the components to each place at a slightly different speed. This is a good way to use the Windows View Transition in the IOS system. Some buttons and components move at different speeds, and the overall effect is more realistic than the whole thing moving at the same rate, leaving time for visitors to properly understand the change.

In the case of Web pages, this may mean that the effects of transitions or animations run at different speeds.

Source code on the Codepen

Ease in and slow out (slow)

Objects rarely accelerate from a static state to the maximum speed, they tend to accelerate gradually and slow down before stopping. Without acceleration and deceleration, the animation feels like a robot.

In terms of CSS, ease of easing is easy to understand, and timing is a way to describe the rate of change in an animation.

With the timing feature, animations can be made more complex by slow acceleration (ease-in), by a fast deceleration (ease-out), or by a Bezier curve.

Source code on the Codepen

Arc Motion (ARC)

Although objects are more lifelike, they rarely move in a straight line when they follow the "ease of ease"-they tend to move along arcs.

We have several CSS ways to achieve arc motion. One is the combination of multiple animations, such as in the elastic ball animation, you can let the ball move up and down while allowing it to move to the right, this time the ball display effect is along the arc movement.

The other is a rotating element, where we can set a point of Origin outside the object as its center of rotation. When we rotate this object, it appears to be moving along the arc.

Codepen on the source code: Animation 1, animation 2

Secondary action (secondary action)

Although the active painting is taking place, the secondary action can enhance its effect. This is like when someone swings his arm and tilt his head when he's walking, or when the elastic ball bounces, it raises some dust.

In Web pages, when the main focus appears, you can start performing minor actions, such as dragging an entry into the middle of the list.

Source code on the Codepen

Time Rhythm (Timing)

The timing of the animation is how long it takes to complete, and it can be used to make heavy animations of objects that look heavy, or in animations that add characters.

This may simply adjust the ' animation-duration ' or ' transition-duration ' value on the Web page.

It's easy for animations to consume more time, but adjusting the tempo of time can help make the content and interaction of the animation more outstanding.

Source code on the Codepen

Exaggeration technique (exaggeration)

Hyperbole is most commonly used in comics to portray attractiveness and increase drama for certain movements, such as a wolf trying to get his throat open to bite something that might be more scary or humorous.

In a Web page, an object can emphasize and portray attraction by sliding up and down, such as filling a form with a vivid part that is more prominent than a shrinking or fading part.

Source code on the Codepen

A solid depiction (Solid drawing)

When animating objects in three dimensions, you should pay extra attention to ensure that they follow the perspective principle. Because people are used to living in a three-dimensional world, if the object does not match the actual, it will make it look bad.

Now browsers support the three-dimensional transformation is good, which means that we can rotate and place three-dimensional objects in the scene, the browser can automatically control their conversion.

Source code on the Codepen

Attraction (appeal)

Attraction is the quality of the work of art that connects us to the ideas of the artist. Like the charm of an actor, it is the combination of detail and action that creates the result of attraction.

Crafting web animations can make them attractive, such as stripe companies that use a lot of animation to increase the reliability of their checkout process.

Source code on the Codepen