@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-timing-function:linear; } .ex2 { animation-timing-function:ease; } .ex3 { animation-timing-function:ease-in; } .ex4 { animation-timing-function:ease-out; } .ex5 { animation-timing-function:ease-in-out; }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="ex1">linear</div> <div class="ex2">ease</div> <div class="ex3">ease-in</div> <div class="ex4">ease-out</div> <div class="ex5">ease-in-out</div> </body> </html>