I want to do an animation, but just one time, not to be on a loop.
In this example, when the animation reach the purple color I want it to stop. Not to start all over.
@keyframes load {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.e {
width: 100%;
height: 30px;
opacity: 0;
}
.one {
background: red;
-webkit-animation: load 5s infinite;
animation: load 5s infinite;
}
.two {
background: green;
-webkit-animation: load 5s infinite 1s;
animation: load 5s infinite 1s;
}
.three {
background: yellow;
-webkit-animation: load 5s infinite 2s;
animation: load 5s infinite 2s;
}
.four {
background: orange;
-webkit-animation: load 5s infinite 3s;
animation: load 5s infinite 3s;
}
.five {
background: purple;
-webkit-animation: load 5s infinite 4s;
animation: load 5s infinite 4s;
}<div class="e one"></div>
<div class="e two"></div>
<div class="e three"></div>
<div class="e four"></div>
<div class="e five"></div>