@keyframes left_move { from {left: 0px;} 20% {left: 200px;} 60% {left: 50px;} 75% {left: 100px;} to {left: 0px;} } div { width: 100px; height: 32px; background: red; position: relative; color: white; animation-name: left_move; animation-duration: 5s; } .ex1 { background: red; animation-iteration-count: infinite; } .ex2 { background: blue; } .ex3 { background: pink; color: black; animation-iteration-count: 3; }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="ex1">infinite</div> <div class="ex2">1</div> <div class="ex3">3</div> </body> </html>