Keyframes in animation

Question

Good day.

I can not penetrate into the key frames of the animation, or rather, for example, I make a slider, there are 3 pictures in it, I set animations with 15 seconds of speed, and infinite.
Now, for example, I want to make the picture stand for 3 seconds, then go left for 2 seconds.
And the second picture immediately followed, and it should stand for 3 seconds, and go to the left in 2 seconds, then the third picture moves forward and stands 3 seconds. Etc.
So, I really want to understand this topic, please explain in more detail how to correctly calculate the key personnel?

I myself tried to do this:

0%{left: 0px;opacity: 1} 16%{left: 0px;opacity: 1} 25%{left: -680px; opacity: 0} 34%{left: -680px; opacity: 0} 43%{left: 680px;opacity: 0} 52%{left: 680px;opacity: 0} 61%{left: 0;opacity: 1} 70%{left: 0;opacity: 1} 79%{left: -680px;opacity: 0} 88%{left: 680px;opacity: 0} 97%{left: 680px;opacity: 0} 100%{left: 0px;opacity: 0}

But at the end point, the first picture does not slide out smoothly as before, but rises to the first point abruptly.

Accepted Answer · 2016-10-06T07:39:22

This solution is for the variant when the current slide leaves the next one.
If you just want a slide shift, you need to use another method.

What is the duration of the entire animation?

(3 sec + 2 sec) * 5 pcs = 25 sec.
1 sec = 4%.

How to make animation of each picture?

3s picture just stands:
```
  0% { left: 0; } 12% { left: 0; } 
```
2s leaves left:
```
 18% { left: -100%; } 
```
Then quietly comes back:
```
 18.001% { z-index: -1; left: -100%; } 100% { z-index: -1; left: 0; } 
```
Values cannot be reused, so add a deviation of .001%.
But it is necessary that 2 seconds before the end of the block was already visible, so the last line is replaced by:
```
  92% { z-index: 0; left: 0; } 100% { z-index: 0; left: 0; } 
```
Fix jamb with z-index animation - do not show the element earlier than necessary:
```
 91.999% { z-index: -1; left: 0; } 
```

How to make a slider animation?

Use animation-delay for slides.

What can be improved?

Performance by using transform: translate instead of left.

 section { position: relative; height: 10em; overflow: hidden; } div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; animation: slide 25s linear infinite both; } @keyframes slide { 0% { z-index: 1; left: 0; } 12% { z-index: 1; left: 0; } 18% { z-index: 1; left: -100%; } 18.001% { z-index: -1; left: -100%; } 18.002% { z-index: -1; left: 0; } 91.999% { z-index: -1; left: 0; } 92% { z-index: 0; left: 0; } 100% { z-index: 0; left: 0; } }

 <section> <div style="animation-delay: 0s; background: red;"></div> <div style="animation-delay: -20s; background: green;"></div> <div style="animation-delay: -15s; background: blue;"></div> <div style="animation-delay: -10s; background: silver;"></div> <div style="animation-delay: -5s; background: antiquewhite;"></div> </section>

 section { position: relative; height: 10em; overflow: hidden; } div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; transform: translateX(0); animation: slide 25s linear infinite both; } @keyframes slide { 0% { z-index: 1; transform: translateX(0); } 12% { z-index: 1; transform: translateX(0); } 18% { z-index: 1; transform: translateX(-100%); } 18.001% { z-index: -1; transform: translateX(-100%); } 18.002% { z-index: -1; transform: translateX(0); } 91.999% { z-index: -1; transform: translateX(0); } 92% { z-index: 0; transform: translateX(0); } 100% { z-index: 0; transform: translateX(0); } }

 <section> <div style="animation-delay: 0s; background: red;"></div> <div style="animation-delay: -20s; background: green;"></div> <div style="animation-delay: -15s; background: blue;"></div> <div style="animation-delay: -10s; background: silver;"></div> <div style="animation-delay: -5s; background: antiquewhite;"></div> </section>

Great, but please explain to me how you calculate keyframes?
Here I am wondering how you calculated these key frames here: 0% 12% 18%, etc.?
@Dolphin, in the first paragraph it is written: 100% = 25 seconds => 1 second = 4%.
A 1 sec = 4% is always or only at the time of these calculations (3 sec + 2 sec) * 5 pcs = 25 sec.
Qwertiy, I probably tortured you with my questions, but I really want to understand and learn.

Answer 2 · 2016-10-06T07:11:09

0% and 100% are essentially the same. It is better to take 4%, not 0% or 0% and 96%.

For example:

 div { -webkit-animation: Anim 8s ease-in-out infinite; animation: Anim 8s ease-in-out infinite; } @-webkit-keyframes Anim { 4%{left: 0px;opacity: 1;} 16%{left: 0px;opacity: 1;} 25%{left: -680px; opacity: 0;} 34%{left: -680px; opacity: 0;} 43%{left: 680px;opacity: 0;} 52%{left: 680px;opacity: 0;} 61%{left: 0;opacity: 1;} 70%{left: 0;opacity: 1;} 79%{left: -680px;opacity: 0;} 88%{left: 680px;opacity: 0;} 97%{left: 680px;opacity: 0;} 100%{left: 0px;opacity: 0;} } @keyframes Anim { 4%{left: 0px;opacity: 1;} 16%{left: 0px;opacity: 1;} 25%{left: -680px; opacity: 0;} 34%{left: -680px; opacity: 0;} 43%{left: 680px;opacity: 0;} 52%{left: 680px;opacity: 0;} 61%{left: 0;opacity: 1;} 70%{left: 0;opacity: 1;} 79%{left: -680px;opacity: 0;} 88%{left: 680px;opacity: 0;} 97%{left: 680px;opacity: 0;} 100%{left: 0px;opacity: 0;} } div { width: 100px; height: 100px; background: tomato; position: absolute; }

 <div></div>

Keyframes in animation

2 answers 2

More articles: