@keyframes left_move { from {left: 0px;} 20% {left: 200px;} 60% {left: 50px;} 75% {left: 100px;} to {left: 0px;} } div { width: 100px; height: 32px; margin-top:5px; background: pink; position: relative; animation-name: left_move; animation-duration: 5s; animation-iteration-count: infinite; } .ex1 { animation-delay: 0; } .ex2 { animation-delay: 500ms; } .ex3 { animation-delay: 1.5s; } .ex4 { animation-delay: -2.5s; }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="ex1">0</div> <div class="ex2">500ms</div> <div class="ex3">1.5s</div> <div class="ex4">-2.5s</div> </body> </html>