“This is the 23rd day of my participation in the Gwen Challenge.

Getting started with the Steps function

Steps () is a timing function that allows us to segment animations or transitions, rather than transitions that continue from one state to another.

Its usage is as follows:

Steps (< number_of_steps >, < direction >)Copy the code

This function takes two arguments — the first argument is a positive value that specifies the number of segments we want the animation to split.

The second parameter defines the key that the action declared in our @keyframes will take place. This value is optional and defaults to “end” when no arguments are passed.

  • A direction of “start” represents a left-continuous function, and when the animation starts, the first segment of the animation will be completed immediately. Starting at the left endpoint, jump immediately to the end of the first step. It immediately jumps to the end of the first paragraph and remains so until the duration of the first step is over. Each subsequent frame will be animated in this mode.

  • A direction of “end” indicates a right-persistence function. Animation executes, in each frame, animation maintain current state until the period of the duration of the completed, will jump to the beginning of the next step, the back of each frame, according to the models in the beginning of the last frame, wait until the end of the frame duration, the execution of the entire animation has ended, and also doesn’t perform the animation element to the end of the frame, Straight back to the beginning of the entire animation, began the second animation. Each selection essentially moves the element from a different side and will produce a different position in the same animation.

CSS Sprite animation implementation

The CSS Steps () function can be used to create some pretty cool image Sprite animations. We can look at the picture below:

There are 10 frames of the original image, 500×72 px wide and 50×72 pixels per frame.

First create a new div, set the width and height to 50×72, and set the background image to this image.

HTML structure:

<div class="hi"></div>
Copy the code

CSS styles:

.hi {
    width: 50px;
    height: 72px;
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/edbb1c1c8a674ed687035968f0fa094c~tplv-k3u1fbpfcp-watermark.image");       
  animation: play .8s steps(10) infinite;
}
Copy the code

The effect is as follows. As you can see, it is a static image, showing only the first frame:

New CSS animation:

.hi {
   /* Same code omitted */     
   animation: play .8s steps(10) infinite;
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }}Copy the code

The effects are as follows:

Original reference:

  • animated sprite sheet by Simurai
  • Designmodo.com/steps-css-a…