Use CSS steps () animation to make my brother move, 🐔🍐🌞🍓

skill • 10 months ago • Lao Li next door Last edited on 2023-07-29 10:42:11

Css step function steps() yes animation-timing-function Another function value of the attribute, which is transited in the form of a frame, can form a freeze frame animation.

Syntax:

 animation-timing-function: steps(number, [end | start])

Parameter description:

number The parameter specifies the number of intervals in the time function. In general, it means how many segments of the animation are distributed (must be positive integers)

end|start The parameter is optional, which means that step change occurs at the start or end of each interval. If omitted, the default is end.

- end : The animation changes degree at the end of the interval

- start : The animation changes step by step at the beginning of the interval

One thing to note here is that, end|start Yes spot It is the beginning or the end!

for instance:

If a line segment is divided into 10 parts, there are 11 points in total.

It seems that it is difficult to understand, then change the way of understanding

steps(number, [end | start]) Is to divide animation into number Segment, total number + 1 Frame screen.
start It means abandoning the first frame to execute animation, end It means abandoning the last frame to execute the animation.

We will prepare a picture of the Iron Mountain

Use CSS steps () animation to make my brother move, 🐔🍐🌞🍓 Sheet 1

The size of this picture is 480 * 2700, and there are 10 frames in total, so steps(10) ；

adopt background-position-y Define the beginning and end of picture playing;

form Is the starting point coordinate, to Is the end point coordinate;

If it is placed vertically (from top to bottom), then steps(10, end) , starting point from by zero , End to by -2700 ；

If it is inverted (from bottom to top), then steps(10, start) , starting point from by -2700 , End to by zero ；

Look at my iron mountain!!!

Use CSS steps () animation to make my brother move, 🐔🍐🌞🍓 Sheet 2

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>Iron Mountain <style> * {     padding: 0;     margin: 0; } body {     width: 100vw;     height: 100vh;     overflow: hidden;     display: flex;     justify-content: center;     align-items: center; } .ikun {     width: 480px;     min-width: 480px;     height: 270px;     background: url(ikun.jpg) no-repeat;     background-size: 100%;     /* animation-name: mover1;  */     animation-name: mover2;     animation-duration: 2s;     /* animation-timing-function: steps(10, start);  */     animation-timing-function: steps(10, end);     animation-iteration-count: infinite;     animation-fill-mode: backwards; } /*Reverse order*/ @keyframes mover1 {     from {         background-position-y: -2700px;     }     to {         background-position-y: 0;     } } /*Positive sequence*/ @keyframes mover2 {     from {         background-position-y: 0;     }     to {         background-position-y: -2700px;     } } </style> </head> <body> <div class="ikun"> </div> </body> </html>

This article is written by@ Lao Li next door Issued on July 29, 2023 at Yeluzi Blog , unless otherwise specified, all articles in this blog are original, please retain the source for reprinting.

comment (0)