@keyframes left_move { from {left: 0px;} 100% {left: 200px;} } div { width: 100px; height: 32px; margin-top:5px; background: pink; position: relative; animation-name: left_move; animation-duration: 2s; animation-iteration-count: infinite; } .ex1 { animation-direction: normal; } .ex2 { animation-direction: reverse; } .ex3 { animation-direction: alternate; } .ex4 { animation-direction: alternate-reverse; }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="ex1">normal</div> <div class="ex2">reverse</div> <div class="ex3">alternate</div> <div class="ex4">alternate-reverse</div> </body> </html>