How to animate infinitly (infinite property is not working properly)? - css

Question

I want to animate dots infinitely, like: first up, second down, third up, fourth-down AND THEN first up, second down and etc.. If I add an infinite property to animation it's like everything animates despite the delay.
[Codepen](https://codepen.io/jagus00/pen/dyyJjaK)

Answer 1

You have to put the "pause" period in the animation itself setting its iteration to infinite. To change the speed, you can work with the duration of the animation and/or percentuals.
#keyframes goUp {
0% {
transform: translateY(0);
}
12.5% {
transform: translateY(50px);
}
25% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
#keyframes goDown {
0% {
transform: translateY(0);
}
12.5% {
transform: translateY(-50px);
}
25% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
* {
box-sizing: border-box;
}
body {
background: #f9f9f9;
}
.dots {
display: flex;
justify-content: center;
margin-top: calc(50vh - 50px);
}
.dots i:nth-child(1) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #ff9600;
animation: goUp 1.6s ease-in-out infinite;
}
.dots i:nth-child(2) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #383838;
animation: goDown 1.6s 0.4s ease-in-out infinite;
}
.dots i:nth-child(3) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #ff9600;
animation: goUp 1.6s 0.8s ease-in-out infinite;
}
.dots i:nth-child(4) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #383838;
animation: goDown 1.6s 1.2s ease-in-out infinite;
}
<div class="dots">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
Using SASS syntax:
#mixin dot
height: 50px
width: 50px
border-radius: 50%
margin: auto 15px
#keyframes goUp
0%
transform: translateY(0)
12.5%
transform: translateY(50px)
25%
transform: translateY(0)
100%
transform: translateY(0)
#keyframes goDown
0%
transform: translateY(0)
12.5%
transform: translateY(-50px)
25%
transform: translateY(0)
100%
transform: translateY(0)
*
box-sizing: border-box
body
background: #f9f9f9
.dots
display: flex
justify-content: center
margin-top: calc(50vh - 50px)
i:nth-child(1)
#include dot
background: #ff9600
animation: goUp 1.6s ease-in-out infinite
i:nth-child(2)
#include dot
background: #383838
animation: goDown 1.6s .4s ease-in-out infinite
i:nth-child(3)
#include dot
background: #ff9600
animation: goUp 1.6s .8s ease-in-out infinite
i:nth-child(4)
#include dot
background: #383838
animation: goDown 1.6s 1.2s ease-in-out infinite