[Reprint] 12 principles of web animation

CSS animation is a very interesting thing, but also the CSS is more complex and difficult to design part. Well, I don't know. There are 12 key principles in the Web animation design. The 12 principles are analyzed in animation 101. Today specially reproduced @ Liu Yinteng translation "Animation Principles for the Web" Chinese.

As front-end designers and engineers, we use CSS to style, locate and create good-looking websites. We often use CSS to add motion transitions and even animations of pages, but we do not often do more than that.

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

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

In this article, I'll cover each of these 12 principles and discuss how they are 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 an object remains constant during movement. When a ball is bouncing, hitting the ground will flatten and the recovery time will be shorter and smaller.

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

This principle may be ignored when it works with Web Components. The DOM object is not necessarily related to the physical, it scales on the screen as needed. For example, a button will be larger and become an informational box, or the error message will appear and disappear.

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

<H1>principle 1:squash and Stretch</H1>
<H2><Ahref="Https://cssanimation.rocks/principles/"target="_parent">animation Principles for the Web</H2>
<article class="principle One">
<div class="shape"></div>
<div class="Surface"></div>
</Article>               

. One. Shape {
  AnimationOne4sInfiniteEase-out;
}

. One. surface {
 Background#000;
 Height10em;
 Width1em;
 PositionAbsolute
 TopCalc50%-4EM);
 LeftCalc50% +10EM);
}

@keyframesOne {
 0%,15% {
 Opacity0;
}
 15%,25% {
 TransformNone
 Animation-timing-function:Cubic-bezier (1,-1.92,.95,.89);
 Width4em;
 Height4em;
 TopCalc50%-2EM);
 LeftCalc50%-2EM);
 Opacity1;
}
 35%,45% {
 TransformTranslateX (8EM);
 Height6em;
 Width2EM;
 TopCalc50%-3EM);
 Animation-timing-function:Linear
 Opacity1;
}
 70%,100% {
 TransformTranslateX (8EM)Translatey (5EM);
 Height6em;
 Width2EM;
 TopCalc50%-3EM);
 Opacity0;
}
}

Body {
 Margin0;
 Background#e9b59f;
 Font-family:Helveticaneue,Arial,Sans-serif;
 Color#fff;
}

H1 {
 PositionAbsolute
 Top0;
 Left0;
 Right0;
 Text-align:Center
 Font-weight:300;
}

H2 {
 Font-size:0.75em;
 PositionAbsolute
 Bottom0;
 Left0;
 Right0;
 Text-align:Center
}

A
 Text-decoration:None
 Color#333;
}

. Principle {
 Width100%;
 Height100VH; 
 position: relative; 
} 
 
 .shape {
 background: # 2d97db; 
 border: 1em solid  #fff; 
 width: 4EM; 
 height: 4EM; 
 position: absolute; 
 top: calc (50%- 2EM); 
 left: calc (50%- 2em); 
}                 /span>       

Preparatory action (anticipation)

Movement does not tend to happen abruptly. In real life, whether a ball begins to roll before it falls into a table, or a person is bent on his knees to take off, exercise usually has some sort of prior accumulation.

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

For example, when hovering over a component, you can zoom out a little before it gets larger, and add additional entries to the initial list to describe how to remove other entries.

Show Layout (Staging)

The performance layout is to ensure that objects are focused in the scene, allowing other objects and visuals in the scene to give way to where the active drawing takes place. This means either putting the active drawing in a prominent position or blurring other elements to focus on what they need to see.

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

Another way is to use actions. When many objects are moving, it's hard to know which ones are worth paying attention to. If all other actions stop, leaving only one in motion, even if the movement is very faint, this can make the object more susceptible to detection.

Another way is to make a shaking and flashing button to simply suggest users such as they might want to save the document. The screen remains static, so subtle movements can also be highlighted.

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

Continuous motion is the drawing of each frame of the animation, and the gesture corresponds to the padding interval usually by a assistant after defining a series of keyframes.

Most web animations use gesture correspondence: transitions between keyframes can make the animation smoother by inserting as many frames as possible between each keyframe.

One exception is the timing feature step . With this feature, the browser "steps" can clear as many unordered frames as possible. You can draw a series of images in this way and let the browser display them sequentially, creating a style of frame-by-picture animation.

Follow and overlap 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 continue to rush forward.

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

To create a feeling of overlapping motion, we can move the component to each place at a slightly different speed. This is a great way to use the Windows (View) transition in an IOS system. Some buttons and components move at different rates, and the overall effect moves more realistically than the whole thing at the same rate, leaving time for the visitor to understand the change appropriately.

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

Ease-in easing (Slow in and Slow out)

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

In the context of CSS, ease-in easing is easy to understand, and the timing function is a way of describing the rate of change in an animated process.

With the timekeeping feature, animations can be slowed down by slow acceleration ( ease-in ), by fast deceleration ( ease-out ), or by using Bezier curves to make more complex effects.

Arc Motion (ARC)

Although objects are more realistic, they rarely move in straight lines when they follow the "ease in"-they tend to move along an arc.

We have several CSS ways to achieve the 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 at the same time let it move to the right, when the ball's display effect is along the arc movement.

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

Secondary action (secondary action)

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

On the Web page, when the main focus appears, you can start performing minor actions, such as dragging an item to the middle of the list.

Time Rhythm (Timing)

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

This may be as simple as adjusting or a value on a Web page animation-duration transition-duration .

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

Exaggeration (exaggeration)

Exaggeration is most commonly used in comics to portray attractiveness and increase drama for certain movements, such as a wolf trying to open his throat to bite something more likely to show a more frightening or humorous effect.

In Web pages, objects can swipe up and down to emphasize and portray attractiveness, such as when filling a form with a vivid part that is more prominent than the part that shrinks and fades.

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 accustomed to living in a three-dimensional world, if the object behaves in a way that does not match the reality, it makes it look bad.

Browser support for three-dimensional transformations is now good, which means that we can rotate and place three-dimensional objects in the scene, and the browser can automatically control their transformations.

Attraction (appeal)

Attraction is a feature of art that connects us to the ideas of the artist. Like the charm of an actor, it is the combination of attention to detail and action that creates an appealing result.

Elaborate animations on web pages can create appeal, such as Stripe, where companies use a lot of animation to increase the reliability of their checkout process.

Extended Reading

• 12 Basic rules of animation
• 12 Basic principles of animation (video)
• Designing with Animation

Special statement: This article transferred from @ Liu Yinteng translation of the "Animation Principles for the Web", if you want to reprint, please specify the Chinese source: Http://www.jianshu.com/p/1858a8733ba3.

[Reprint] 12 principles of web animation