revision:
<div class="div1 spec">animation</div>
<style>
.div1{width: 4vw; height: 4vw; border-radius: 15%; color: white; padding: 1vw; background: burlywood; vertical-align: middle; position: relative; animation: slide 5s infinite;}
@keyframes slide{
from{left: 0vw;}
to{left: 90vw;}
}
</style>
<div class="div2">delay</div>
<style>
.div2{width: 5vw; height: 5vw; border-radius: 15%; color: white;background: blue; position: relative; animation: slide1 5s infinite; animation-delay: 2s;}
@keyframes slide1 {
from{left: 0vw;}
to{left: 90vw;}
}
</style>
<div class="spec">
<div class="div2d">alternate</div>
<div class="div2a">reverse</div>
<div class="div2b">alternate-reverse</div>
<div class="div2c">normal</div>
</div>
<style>
.div2d{width: 5vw; height: 5vw; border-radius: 15%; background: green; color: white; position: relative; animation: slide2 5s infinite; animation-direction: alternate;}
.div2a{width: 5vw; height: 5vw; border-radius: 15%; background: green; color: white; position: relative; animation: slide2 5s infinite; animation-direction: reverse;}
.div2b{width: 5vw; height: 5vw; border-radius: 15%; background: green; color: white; position: relative; animation: slide2 5s infinite; animation-direction: alternate-reverse;}
.div2c{width: 5vw; height: 5vw; border-radius: 15%; background: green; color: white; position: relative; animation: slide2 5s infinite; animation-direction: normal;}
@keyframes slide2 {
from{left: 0vw;}
to{left: 90vw;}
}
</style>
<div class="spec">
<div class="div3">duration</div>
<div class="div3a">duration</div>
</div>
<style>
.div3{width: 5vw; height: 5vw; border-radius: 15%; background: red; color: white; position: relative;
animation: slide3 infinite; animation-duration: 3s;}
.div3a{width: 5vw; height: 5vw; border-radius: 15%; background: red; color: white; position: relative;
animation: slide3 infinite; animation-duration: 6s;}
@keyframes slide3 {
from{left: 0vw;}
to{left: 90vw;}
}
</style>
<div class="spec">
<div class="div4">none</div>
<div class="div4a">forwards</div>
<div class="div4b">backwards</div>
<div class="div4c">both</div>
</div>
<style>
.div4{width: 5vw; height: 5vw; border-radius: 15%; background: yellow; color: white; position: relative; animation: slide4 5s alternate infinite; animation-fill-mode: none;}
.div4a{width: 5vw; height: 5vw; border-radius: 15%; background: yellow; color: white; position: relative; animation: slide4 5s alternate infinite; animation-fill-mode: forwards;}
.div4b{width: 5vw; height: 5vw; border-radius: 15%; background: yellow; color: white; position: relative; animation: slide4 5s alternate infinite; animation-fill-mode: backwards;}
.div4c{width: 5vw; height: 5vw; border-radius: 15%; background: yellow; position: relative; animation: slide4 5s alternate infinite; animation-fill-mode: both;}
@keyframes slide4{
from{left: 0vw; background-color: yellow;}
to{left: 90vw; background-color: brown;}
}
</style>
<div class="spec">
<div class="div5">infinite</div>
<div class="div5a">count - 2</div>
</div>
<style>
.div5{width: 5vw; height: 5vw; border-radius: 15%; background: black; color: white; position: relative; animation: slide5 5s alternate; animation-iteration-count: infinite;}
.div5a{width: 5vw; height: 5vw; border-radius: 15%; background: black; color: white; position: relative; animation: slide5 5s alternate; animation-iteration-count: 2;}
@keyframes slide5{
from{left: 0vw; background-color: green;}
to{left: 90vw; background-color: blue;}
}
</style>
<div class="div6">animation name: slide</div>
<style>
.div6{width: 7vw; height: 7vw; border-radius: 15%; background: blue; color: white; position: relative; animation: 5s alternate infinite; animation-name: slide6;}
@keyframes slide6{
from{left: 0vw; background-color: blue;}
to{left: 90vw; background-color: green;}
}
</style>
<div class="spec">
<div class="div7">play-state: running</div>
<div class="div7a">play-state: paused</div>
</div>
<style>
.div7{width: 7vw; height: 7vw; border-radius: 15%; background: grey; color: white; position: relative; animation: slide7 9s alternate infinite; animation-play-state: running;}
.div7a{width: 7vw; height: 7vw; border-radius: 15%; background: grey; color: white; position: relative; animation: slide7 9s alternate infinite; animation-play-state: paused;}
@keyframes slide7{
from{left: 0vw; background-color: grey;}
to{left: 90vw; background-color: burlywood;}
}
</style>
<div class="spec">
<div class="div8">linear</div>
<div class="div8a">ease</div>
<div class="div8b">ease-in</div>
<div class="div8c">ease-out</div>
<div class="div8d">ease-in-out</div>
<div class="div8e">step-start</div>
</div>
<style>
.div8{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: linear;}
.div8a{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: ease;}
.div8b{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: ease-in;}
.div8c{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: ease-out;}
.div8d{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: ease-in-out;}
.div8e{width: 7vw; height: 7vw; border-radius: 15%; background: pink; color: white; position: relative; animation: slide8 5s alternate infinite;animation-timing-function: step-start(2, start);}
@keyframes slide8{
from{left: 0vw; background-color: red;}
to{left: 90vw; background-color: white;}
}
</style>