1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 4 <html lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Animation of left property</title> 8 <style> 9 div { 10 position: relative; 11 left: 100px; 12 height: 200px; 13 width: 200px; 14 background-color: #9bb; 15 -webkit-animation-name: bounce; 16 -webkit-animation-duration: 2s; 17 -webkit-animation-iteration-count: infinite; 18 -webkit-animation-direction: alternate; 19 -webkit-animation-timing-function: ease-in-out; 20 } 21 22 @-webkit-keyframes bounce { 23 from { 24 left: 100px; 25 } 26 to { 27 left: 300px; 28 } 29 } 30 31 </style> 32 </head> 33 <body> 34 <h1>Animation of 'left' property</h1> 35 36 <p>The element below should bounce 200 pixels left and right continuously</p> 37 38 <div id="target"> 39 This element should animate. 40 </div> 41 42 </body> 43 </html>
