The introduction

In Web applications, front-end students often use several schemes to achieve animation effects:

  1. Css3 Transition/animation – Enables transition animation
  2. SetInterval/setTimeout – To change the position of the image repeatedly by setting an interval
  3. RequestAnimationFrame – a callback function is used to change the position of the image. The system determines the timing of this callback function. Better performance than timed modification without frame loss

In most of the requirements, cSS3 transition/animation can meet our requirements, and compared with JS implementation, it can greatly improve our development efficiency and reduce development costs.

This article will focus on the use of animation to make a summary, if your work requires a lot of animation, I believe this article can help you gain:

  • Animation Commonly used Animation properties
  • Animation implements continuous broadcasting
  • Animation bounces back
  • Animation realizes the effect of live broadcast thumbs-up ❤️
  • What kind of sparks will Animation and Svg create?
    1. Loading component
    2. Progress bar component
  • Animation Steps () uses ⏰
    1. Achieve typing effect
    2. Draw frame animation

Animation Commonly used Animation propertiesThe resources

After the introduction of the commonly used properties of animation, in order to better understand and use these properties, the following will implement some hands-on DEMO details

Animation implements continuous broadcastingOnline Code

The broadcast effect is achieved by modifying the Y-axis position of the content in the parent element

@keyframes scroll {   
  0%{
    transform: translate(0.0);
  }
  100%{
    transform: translate(0, -$height); }}.ul {
  animation-name: scroll;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation: scroll 5s linear infinite; Short for animation properties */
}
Copy the code

Here, in order to preserve the consistency of broadcast scrolling effect and prevent no content when scrolling to the last frame, it is necessary to add one more duplicate data for filling

<div class="ul">
  <div class="li">Xiao Liu joined the Concave-convex Laboratory</div>
  <div class="li">Xiao Deng joined the Concave-Convex Laboratory</div>
  <div class="li">Xiao Li joined the Concave-convex Laboratory</div>
  <div class="li">Mr. Wang joined the Concave-convex Laboratory</div>
	<! Insert data for padding -->
  <div class="li">Xiao Liu joined the Concave-convex Laboratory</div>  
</div>
Copy the code

Animation bounces backOnline Code

This is done by splitting the transition animation into stages, each with the top property staying in a different position

/* Specifies animation, change top,opacity */
@keyframes animate {  
  0% {
    top: -100%;
    opacity: 0;
  }
  25% {
    top: 60;
    opacity: 1;
  }
  50% {
    top: 48%;
    opacity: 1;
  }
  75% {
    top: 52%;
    opacity: 1;
  }
  100%{
    top: 50%;
    opacity: 1; }}Copy the code

To make the transition more natural, the cubic- Bezier () function defines a Bezier curve to control the playback speed of the animation

After the transition animation has been executed, we need animation-fill-mode: forward to move the elements towards the property values of the last frame of the animation

.popup {
  animation-name: animate;
  animation-duration: 0.5 s;
  animation-timing-function: cubic-bezier(0.21.0.85.1.1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* Animation: Animate 0.5s Cubic - Bezier (0.21, 0.85, 1, 1) 1 forward; Short for animation properties */
}
Copy the code

Animation implements thumbs-up effectOnline Code

I believe that most of the students know the like effect, this article will achieve a simple version of the like effect, mainly about the realization of ideas:

1. In order for the bubble to be offset upwards, we need to first implement a @keyframes animation moving in the Y-axis direction

/* Specify the animation, change the y offset distance */
@keyframes animation-y { 
  0%{
   transform:  translate(-50%.100px) scale(0);
  }
  50%{
   transform:  translate(-50%, -100px) scale(1.5);
  }
  100%{
    transform:  translate(-50%, -300px) scale(1.5); }}Copy the code

2. In order to make the upward offset of the bubble look less monotonous, we can implement another animation of @keyframes moving in the X-axis direction

/* Specify the animation, change the x offset distance */
@keyframes animation-x {
  0%{
    margin-left: 0px;
  }
  25%{
    margin-left: 25px;
  }
  75%{
    margin-left: -25px;
  }
  100%{
    margin-left: 0px; }}Copy the code

Here I understand:

  • Although it isModify the marginTo change the x-offset distance, but actually withModify the transformThere is not much difference in performance
  • Because by@keyframes animation-yIn thetransformA new one has been createdPaintLayers
  • animationProperty allows the render layer to be promoted toCompositing LayersHave a separateGraphics SlayerWith hardware acceleration enabled, it will not affect other rendering layersPaint, layout,
  • Related reference documents – Wireless Performance optimization: Composite
  • As shown below:

If I understand wrong here, also ask the reader big guy to point out, grateful ~

3. Apply the two @keyFrames animations we implemented to the bubble

.bubble {
  animation: animation-x 3s -2s linear infinite,animation-y 4s 0s linear 1;
/* Hardware acceleration for Bubble */
}
Copy the code

4. In the like event, add/remove bubble element dynamically through JS operation

function like() {
  const likeDom = document.createElement('div');
  likeDom.className = 'bubble'; // Add styles
  document.body.appendChild(likeDom);  // Add elements
  setTimeout( () = > {
    document.body.removeChild(likeDom);  // Remove the element
  }, 4000)}Copy the code

Animation and Svg draw loading/ Progress bar componentsOnline Code

1. First, we use SVG to draw a circle with a circumference of 2 * 25 * PI = 157

<svg with='200' height='200' viewBox="0 0 100 100"  >
  <circle cx="50" cy="50" r="25"  fill="transparent" stroke-width="4" stroke="#0079f5" ></circie>
</svg>
Copy the code

2. Draw the solid line circle as a dotted line circle, here the dotted line needs to be drawn using the stoke-Dasharray :50, 50 (can be shortened to 50) property, stoke-Dasharray Reference

  • Its value is a sequence of numbers separated by commas or whitespace, specifiedDashed line (50 px)andGap (50 px)The length of the.
  • Due to the50(dash) + 50(gap) + 50(dash) = 150, 150 < 157, cannot draw a complete circle, so the right hand side will existGap (7 px)
<svg with='200' height='200' viewBox="0 0 100 100"  >
  <circle cx="50" cy="50" r="25"  fill="transparent" stroke-width="4" stroke-dasharray="50" stroke="#0079f5" ></circie>
</svg>
Copy the code

3. The stroke-Dashoffset property offsets the understrokes and gaps of the circle, and animates @keyframes to create something from nothing, stoke-Dashoffset references

  • Set up thestroke-dasharray="157 157“, specifyThe dashed line (157 px) 和 Gap (157 px)The length of the.
  • Add @keyFrames animationModify the stroke - dashoffset valueAnd has a value ofA positive numberwhenCounterclockwise migration🔄, that value isA negative numberWhen,Clockwise deviation🔃
@keyframes loading {
  0%{
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: -157; /* The lines are offset clockwise */
  }
}
circle{
    animation: loading 1s 0s ease-out infinite;
}
Copy the code

4. Change the dash and gap values

  • To make the loading component lines visible, we need one50px“, setstroke-dasharray="50"
  • In order for the dash to be offset and completely disappear,The notch needs to be greater than or equal to circumference 157To set upstroke-dasharray="50 157"
  • Add @keyFrames animation so thatThe beginning of the animation is still processed when the animation ends, you need toModify stroke-Dashoffset :-207(dash + Notch Length)
  • Progress bar is also a similar principle to help understandstroke-dashoffsetProperty, the specific implementation please viewThe sample
@keyframes loading {
  0%{
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: -207; /* Ensure that the animation ends with the start of the animation */
  }
}
circle{
    animation: loading 1s 0s ease-out infinite;
}
Copy the code

Use Animation steps ()

Steps () is the property value of animation-timing-function

animation-timing-function : steps(number[, end | start])
Copy the code
  • The steps function specifies a step function that acceptsTwo parameters
  • The first argument takes an integer value, indicates that two key frames are completed in several steps
  • The second argument has two values start or end. The default value is end
  • Step-start is equivalent to step(1, start). Step-end is the same thing as step(1, end)

Steps applies to keyframe animation. The first parameter subdivides two keyframes into N frames, and the second parameter determines whether the interval from one frame to the next is filled with a start frame or an end frame.

Take a look at the picture below:

  • steps(N, start)Divide the animation intoN section, animation in each paragraphThe starting pointA step (i.e. hollow circle to solid circle) occurs and the animation ends at frame N
  • steps(N, end)Divide the animation intoN section, animation in each paragraphAt the end ofA step (i.e. hollow circle → solid circle in the figure) occurs, and the NTH frame has been skipped at the end of the animation (i.e. hollow circle → solid circle in the figure), remaining at N+1 frame.



Steps () resources

Real knowledge comes from practice!

Animation implements typing effectsOnline Code

  • I’m an O2man. I’m an O2man13A character. [Tested, most Chinese fonts have the same width and height per character]
  • steps(13)The @keyframes animation can be divided into13 phaseRun, andEach stage runs the same distance.

The effect is as follows:

/* Change the container width */
@keyframes animate-x { 
  0%{
    width: 0; }}p { 
    width: 125px;
    overflow: hidden;
    border-right: 1px solid transparent;
    animation: animate-x 3s 0s steps(13) 1 forwards;   
}
Copy the code
  • It can be found that this is not enough. In the process of animation, characters are truncated. In order to ensure that the characters of the current stage can be accurately displayed after each stage is run, we need to ensure thatThe width of each character is equal to the distance at which each stage of the animation runs
  • Set up theMonacoFont properties to ensure thatEach character has the same width, the specific pixel is affectedfontSizeThe font in the example is about 9.6px wide,9.6px * 13 = 124.8px (125px), so when we set the container width to 125px, we can do it:The width of each character is equal to the distance at which each stage of the animation runs (about 9.6px).
p { 
    /* Set the Monaco font property to 16px to ensure that each character has the same width, which is about 9.6p */
    font-family: Monaco; 
    /* 9.6px * 13 = 124.8px (125px) */
    width: 125px ;
    font-size: 16px;
    overflow: hidden;
    border-right: 1px solid transparent;
    /* Animate cursor-x */
    animation: animate-x 3s 0s steps(13) 1 forwards,cursor-x 0.4 s 0s linear infinite;  
}
Copy the code

Animation implements frame Animation ⏰Online Code

  • So here we have one47 frametheSprite art (CSS Spirit), set the background image
.main {
  width: 260px;
  height: 200px;
  background: url(url) no-repeat;
  background-size: 100%;
  background-position: 0 0;
}
Copy the code
  • Add @ keyframesModify the background - positionTo move the background image
@keyframes animate { 
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%; }}.main{
  width: 260px;
  height: 200px;
  background: url(url) no-repeat;
  background-size: 100%;
  background-position: 0 0;
  animation: animate 2s 1s steps(47) infinite alternate;
}
Copy the code
  • CSS also providesanimation-play-stateUsed to control whether the animation is paused
input:checked+.main{
    animation-play-state: paused;
}
Copy the code

This article is quite long, thank you for reading, I hope you can have a good harvest

If this article has been helpful to you, please follow mineblog

The resources

Steps () in CSS3 Animation: Steps () in CSS Will Change Wireless performance optimization: Composite