CSS3 animation practice

Common CSS3 animations in demand generally include tween animation (also known as “keyframe animation”) and frame-by-frame animation, which are introduced below:

1. Tween animation/keyframe animation: often used for changes in displacement, color (transparency), size, rotation, tilt, etc. There are generally two methods for tween animation, Transitions and Keyframes Animation. Transitions: Used to implement simple animations with only the first two frames. It is used for page interactive operation to make the interactive effect more lively.

   CSS
   transitionAllows CSS property values to transition smoothly within a certain time interval.
   
   
   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.

   Keyframes animation: used to achieve complex animations with many Keyframes.

   Sets the keyframe rules for animation.
   
   
   
   animationthe
   timing-functionSet to
   ease,
   linearor
   cubic-bezier, it inserts a tween animation between each keyframe to produce a coherent animation.

2. Frame by frame animation:

   The animation
   timing-functionThe default value is
   easeIt inserts a tween animation between each keyframe, so the animation is consistent.
   
   
   In addition to
   ease,
   linear,
   cubic-bezierAll of these transition functions insert tween.
   
   
   Some effects that do not require tween and only jump between keyframes should be used
   stepsTransition mode.

   See CSS3 Animation frame for more details. Frame-by-frame animations can be used for loading animations, but more often for Sprite animations (character movements). Sprite animation puts all frames together and controls background-position through CSS3’s animation.

   Let’s look at an example of Sprite animation:
   
   
   
   (Case: Click on the Leaflet of the Alliance for the Bored)

   The steps parameters have several holes to note: The first parameter is the number of intervals specified, which refers to the number of steps between the two keyframes, not the number of changes in the keyframes. We take the hand part in the above case as an example: As can be seen from the Sprite picture, there are two states of hand swing, so two frames of keyframes need to be written:

   @-webkit-keyframes wave{ 0%{background-position:0 0; } 50%{background-position:100% 0; }}Copy the code

   Set different number values:

   /* Set 'number' to 2*/. Active.share3. hand{-webkit-animation: Steps (2,end) 2s forward infinite; }Copy the code

   /* Set 'number' to 1*/.active.share3. hand{-webkit-animation: Steps (1,end) 2s forward infinite; }Copy the code

   
   
   (left:numberFor 2; Right:number1)

   The second parameter is optional, acceptstartandendTwo values: specified at each intervalThe starting pointorAt the end ofThere’s a step change. throughW3CThe working mechanism diagram of STEP can be understood:
   
   (Photo credit:W3C)

   TIPS:

   step-startIs equivalent to
   steps(1,start): the part of the left endpoint is the beginning when the animation is executed;
   
   
   
   step-endIs equivalent to
   steps(1,end): Animation starts with the end point. The default value is end.

   Finally amway a tool to calculate the number of frames: CSS3 animation frame calculator

1. Advantages:
   

   Simple and efficient
   
   
   declarative
   
   
   Independent of the main thread, hardware accelerated (GPU)
   
   
   Simple controls to play and pause the KeyFrame Animation

2. Disadvantages:
   

   Animation content cannot be dynamically modified or defined
   
   
   Different animations cannot be synchronized
   
   
   Multiple animations cannot stack on top of each other

To summarize our experience in doing animation requirements, we can summarize the following 7 steps. Take this requirement as an example:

(case: iphone6s promotion game)

1. Observe – Which elements move? How can the element be moved?

   According to the visual draft, analyze the title, buttons, characters, background can be appropriate to add animation elements.

2. Communicate — understand the designer’s ideas and come up with your own.

   This is the general animation process given by the designer. The specific transition and dynamic effect are not clearly given, so you can communicate with the designer according to your own ideas.
   
   

3. Analysis of theAnalyze the hierarchy of animation elements (occurrence order); Draw an animated timeline; Write the CSS animation timeline based on the timeline.
   
   Analysis of the appearance of the page animation can be divided into four levels:
   
   
   
   Draw an animation timeline based on the previous analysis:
   
   
   
   Write the CSS animation timeline based on the timeline:
   
   Method one:Place all animation elements on one timeline (ideal for small elements).

   a0{-webkit-animation: a0 2s forwards; } @ 0% - its - keyframes a0 {{... 30%} {... } } a1{-webkit-animation: a1 2s forwards; {} @ - its - keyframes a1 0%, 30% {... 50%} {... } } a2{-webkit-animation: a2 2s forwards; A2 {of} @ - its - keyframes 0%, 50% {... 75%} {... } } a3{-webkit-animation: a3 2s forwards; } @ - its - keyframes a3 (0%, 75% {... 100%} {... }}Copy the code

   Method 2: Animation elements of the same stage are placed on a timeline.

   A0 {- its - animation: a0 0.6 s recently; } @ 0% - its - keyframes a0 {{... 100%} {... }} a1{-webkit-animation: a1 0.4s 0.6s forward; } @ 0% - its - keyframes a1 {{... 100%} {... }} a2{-webkit-animation: a2 0.5s 1s forward; } @ 0% - its - keyframes a2 {{... 100%} {... }} a3{-webkit-animation: a3 0.5s 1.5s forward; } @ 0% - its - keyframes a3 {{... 100%} {... }}Copy the code

4. Cut the figure— PS CC 2015 Change the group/layer name to”*.png “to generate image resources.
   
   The steps to use PHOTOSHOP CSS 2015 are as follows:
   
   

5. Positioning – Use absolute positioning appropriately; Use REM appropriately. Amway a sublime plug-in: PX to REM plug-in.

6. implementation

   From nothing to something:

   • Transparency – opacity
   • Displacement – translate

   • Width — width (rarely used)

     Move:

   • Two-thirds of d conversion – transform
   • Other attributes

7. polish

   Later introduced

Don’t animate before,after!

1. inertia

   Instead of stopping where it should have stopped, the object continues to oscillate for some time by inertia and then swings back in the opposite direction. Inertia is quite common in everyday animation requirements, involving high-speed entry of elements.

   • Example: The title quickly slides into the screen from the left. The title should stop at the center of the screen. Due to the action of inertia, the title reaches the center and slides to the right for a short time, and then slides back in the opposite direction.
     
     (Case: 618 APP Returnpage H5)

2. perspective

   The distance between the object and the observer passes through at restSize of objectTo reflect.
   
   As the object moves throughDifferent velocities of near and far objectsTo reflect, so as to form a sense of hierarchy.Objects near move fast and objects far away move slowly.
   
   
   
   (Perspective schematic diagram)

   • Example: Clouds vary in distance from the observer (it is impossible for all clouds to be in the same plane). When animating the clouds, you can set the speed of movement according to the size (distance) of the clouds. The near clouds float faster than the far ones, thus forming perspective.

     .cover_clouds .c1,
     .cover_clouds .c2,
     .cover_clouds .c4,
     .cover_clouds .c6
     {
         -webkit-animation: cloudFloat linear 6s infinite;
     }
     .cover_clouds .c3,
     .cover_clouds .c5,
     .cover_clouds .c7
     {
         -webkit-animation: cloudFloat linear 10s infinite;
     }Copy the code

     (case: iphone6s promotion game)

3. rhythm

   Using curves and gentle movements can make the effect more vivid. Keeping multiple elements in the same rhythm keeps the animation from getting too messy.

   • Example: Constant breathing versus slow breathing.

     .breath{
         -webkit-animation:
         breath 6s linear infinite;
     }Copy the code

     .breath{
         -webkit-animation:
         breath 6s cubic-bezier(.2,.73,.71,.44) infinite;
     }Copy the code

     
     
     (Left: effect of uniform respiration; Right: effect of slow breathing)
     
     Following the animation to breathe, you can obviously feel that the slow breathing is closer to our actual breathing situation. Respiration function is as follows:
     
     
     
     (Photo credit:Make interface animation more natural – ISUX)

4. follow

   The following action is to disassemble various parts of the object, and usually the parts without skeleton are easier to produce the following action. For example, when a runner suddenly stops, his clothes, hair, etc., may still move. Among them, people are “subjects” and clothes and hair are “appendages”. The motion of the appendage depends on: the motion of the subject, the weight and texture of the appendage itself, and the resistance of the air. The overlapping and following of the movement between the subject and the appendage is the standard to judge the smoothness and naturalness of the movement.

   • Example: After the action of the main character on the home page is triggered, a small range of four-way movement is carried out to simulate the effect of the trembling of the character’s body. The headdress (flower and bone) and the main body of the movement (people) are not an integral whole, belong to the appendage. The motion of the appendage is affected by the motion of the subject.
     
     (Case: Clap Tanabata activity page – Qilat Festival)

1. Don’t have to left/right/width/height/margin – top, etc
2. To use less color/background, etc
3. Use the translate/opacity
4. Properly enable GPU acceleration
5. Use will-change appropriately

1. CSS3 Transition,Techzero,2014-04-1
2. In-depth understanding of CSS3 Animation frame Animation,Aaron,2015-07-13
3. CSS3 timing-function: Steps (
4. Summary of Mainstream Animation Implementation methods,Benjamin,2015-01-25
5. Animation Principles for the Web
6. 12 basic principles of animation

Convex laboratory
Aotu. IO/notes / 2016 /…

Last updated: 2019-03-15