@keyframes left_move { from {left: 0px; } 100% {left: 200px; background:blue; color: #fff} } .wrap { border:1px solid #ccc; padding: 10px; } .wrap > div { width: 100px; height: 32px; margin-top:5px; background: pink; position: relative; } .wrap:hover > div { animation-name: left_move; animation-duration: 1s; animation-iteration-count:1; } .ex1 { animation-fill-mode: none; } .ex2 { animation-fill-mode: forwards; } .ex3 { animation-fill-mode: backwards; } .ex4 { animation-fill-mode: both; }
<!DOCTYPE html> <html lang="ko"> <head></head> <body> 마우스를 올려보세요. <div class="wrap"> <div class="ex1">none</div> <div class="ex2">forwards</div> <div class="ex3">backwards</div> <div class="ex4">both</div> </div> </body> </html>