Quiero hacer una animación, pero solo una vez, para no estar en un bucle.
En este ejemplo, cuando la animación alcance el color púrpura, quiero que se detenga. No para empezar de nuevo.
@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>