1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <style type="text/css" media="screen"> 6 .box { 7 position: relative; 8 height: 100px; 9 width: 100px; 10 margin: 10px; 11 background-color: blue; 12 } 13 14 .slow { 15 -webkit-animation: slow 2s infinite linear alternate; 16 } 17 18 .fast { 19 -webkit-animation: fast 2s infinite linear alternate; 20 } 21 22 @-webkit-keyframes slow { 23 from { 24 left: 0px; 25 } 26 to { 27 left: 400px; 28 } 29 } 30 31 @-webkit-keyframes fast { 32 from { 33 -webkit-transform: translateX(0); 34 } 35 to { 36 -webkit-transform: translateX(400px); 37 } 38 } 39 </style> 40 </head> 41 <body> 42 <p>The lower box should animate more smoothly than the upper one (on Mac).</p> 43 <div class="box slow"></div> 44 <div class="box fast"></div> 45 </body> 46 </html> 47
