This article mainly introduces the animation-timing-function property of animation property in CSS3. It does not introduce all animation features of CSS3. If you need to know the complete use skills of animation property of CSS3, You can see the interesting CSS3 Animation written before.

Skillfully use CSS3 keyframes and Sprite map to make non-GIF keyframes animation

By default, when we want to create an animation using CSS3’s @keyframes feature, do you remember what its slow value is?

If each value of the animation property is set separately, the ease property refers to animation-timing-function. As shown in the figure above, the default value of the ease property is ease, which is the ease value from fade in to fade out.

Here’s an example:

Animation from red to blue.

Below is the source code, for convenience, here does not use the consistent attributes, but the attributes are separated and listed separately for easier analysis.

.box1{ width:100px; height:100px; animation-name: box1; animation-duration: 1s; animation-timing-function:ease; animation-iteration-count:infinite; } @keyframes box1{ 0%{ background:#ff0000; } 50%{ background:#00ff00; } 100%{ background:#0000ff; }}Copy the code

From the example above you can see a very smooth color transition. This is what happens when you set animation-timing-function to ease.

Let’s look at some possible values for animation-timing-function:

/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing- Function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: frames(10); /* Multiple animations */ animation-timing-function: ease, step-start, Cubic - Bezier (0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset;Copy the code

I tried using different animation-timing-function property values to see the difference between them:

Start by defining the same @keyframes rule:

@keyframes box2{ 0%{ background:#ff0000; Translate the transform: scale (0, 0) (0 px, 0 px); } 50%{ background:#00ff00; The transform: scale (1, 1) translate (100 px, 0 px); } 100%{ background:#0000ff; Translate the transform: scale (1, 1) (0 px, 0 px); }}Copy the code

① Use the step-start attribute value:

.box2-1{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:step-start;  //step-start
    animation-iteration-count:infinite;
  }
Copy the code

② Use the step-end attribute value:

.box2-2{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:step-end;  //step-end
    animation-iteration-count:infinite;
  }
Copy the code

③ Use the steps() attribute value:

.box2-3{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:steps(2,start);  //steps()
    animation-iteration-count:infinite;
  }
Copy the code

④ Use the value of ease:

.box2-4{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:ease;  //ease
    animation-iteration-count:infinite;
  }
Copy the code

⑤ Use ease-in attribute values:

.box2-5{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:ease-in;  //ease-in
    animation-iteration-count:infinite;
  }
Copy the code

⑥ Use the ease-out attribute value:

.box2-6{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:ease-out;  //ease-out
    animation-iteration-count:infinite;
  }
Copy the code

⑦ Use ease-in-out attribute values:

.box2-7{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:ease-in-out;  //ease-in-out
    animation-iteration-count:infinite;
  }
Copy the code

⑧ Use linear attribute values:

.box2-8{
    width:70px;
    height:70px;
    border-radius:50%;
    animation-name: box2;
    animation-duration: 1s;
    animation-timing-function:linear;  //linear
    animation-iteration-count:infinite;
  }
Copy the code

⑨ Use cubic-bezier() :

.box2-9{ width:70px; height:70px; border-radius:50%; animation-name: box2; animation-duration: 1s; Animation-timing -function: cubic-bezier(0.1, 0.7, 1.0, 0.1); //cubic-bezier() animation-iteration-count:infinite; }Copy the code

I want to use animation properties, a set of static format sequence images according to certain time interval, looks like the GIF figure, from the above example, to achieve this effect, the preferred is steps () attribute values, because the attribute value can cut of the animation process is divided into time intervals of the same length, like a frame by frame animation, I can animate without using giFs simply by setting the animation rule to change the background-position property of the background image.

Let’s do it. First I need to prepare a sequence diagram.

At the top is a GIF image downloaded from the Internet

I downloaded a GIF from the Web and then put it in Photoshop to get the static sequence I wanted in Sprite.

When I drag it into Photoshop, I can see that there are 12 frames in this GIF. I carefully arrange the frames in a row or column.

I exported it as a static image in any format. At this time, I could balance the image size, quality and space occupation. Finally, I chose to export it as a JPG image with a width of 1920 and a height of 90.

Before entering the formal animation implementation, I need to know the width and height of each small graph in the whole sequence diagram, so as to set the width and height of the background image container in the future. I also need to know how many small graphs there are in this sequence diagram. It has been known in the early stage that there are 12 small graphs:

Layout: Horizontal Layout Width: 1920px Height: 90px Number of small images: 12 Width: 1920/12 = 160 (px)Copy the code

Knowing these parameters, you can proceed to CSS3 writing:

<style>
@keyframes move-jpg{
  0%{
    background-position: 0px 0px;
  }
  100%{
    background-position: -1920px 0px;
  }
}

.move-jpg{
  width:160px;
  height:90px;
  background-image:url(/public/article/1511946406127/sucai.jpg);
  animation-name: move-jpg;
  animation-duration: 1s;
  animation-timing-function: steps(12,end);
  animation-iteration-count:infinite;
}
</style>
Copy the code

I’m defining a div tag to play an animation with:

<div class="move-jpg"></div>
Copy the code

OK~ Here is the final image:

I can easily adjust the playback duration and the number of key frames by adjusting the properties of animation-duration and animation-timing-function.

I can also use the animation-rotund-count property to set the number of times to play. This time I set infinite, which means to play forever, or I can set 1, 2, 3…

Animation-direction can also be set to specify the playback direction. Optional property values:

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
Copy the code

Set alternate to play forward and then reverse.

Bikachu shows a happy face and then plays it backwards to show a confused face

Reference: Animation-MDN