animation-direction: normal | alternate [,normal | alternate]*
|
<!DOCTYPE html>
<html> <style type="text/css"> @-webkit-keyframes resize { from { width: 100px; height: 300px; left: 0; top: 0; } 50% { width: 100px; height: 100px; left: 300px; top: 0; background-color: rgb(68, 215, 235); } 80%{ background-color: rgb(217, 55, 182); } to { width: 300px;height: 100px; left: 300px; top: 300px; } } #anim1 {-webkit-animation-name:resize; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 5; -webkit-animation-direction: alternate; position:absolute; background-color: rgb(20, 106, 108);} </style> <body> <div id="anim1">Watch me move and change size!</div> </body> </html> |