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 rotate property</title> 8 <style type="text/css" media="screen"> 9 div { 10 -webkit-box-sizing: border-box; 11 } 12 13 .column { 14 margin: 10px; 15 display: inline-block; 16 vertical-align: top; 17 } 18 .container { 19 position: relative; 20 height: 200px; 21 width: 200px; 22 margin: 10px; 23 background-color: silver; 24 border: 1px solid black; 25 } 26 27 .box { 28 position: absolute; 29 top: 0; 30 left: 0; 31 height: 60px; 32 width: 60px; 33 border: 1px dotted black; 34 -webkit-transform-origin: top left; /* to match SVG */ 35 } 36 37 .final { 38 border: 1px solid blue; 39 } 40 41 #target, #ref { 42 -webkit-animation-name: bounce; 43 -webkit-animation-duration: 2s; 44 -webkit-animation-iteration-count: infinite; 45 -webkit-animation-direction: alternate; 46 -webkit-animation-timing-function: ease-in-out; 47 } 48 49 @-webkit-keyframes bounce { 50 from { 51 -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg); 52 } 53 to { 54 -webkit-transform: translate(75px, 25px) scale(2) rotate(45deg); 55 } 56 } 57 </style> 58 </head> 59 <body> 60 <h1>CSS Animation of 'webkit-transform:' property for SVG</h1> 61 62 <p>The SVG animation should be identical with the CSS one</p> 63 64 <div class="column"> 65 <h2>SVG compound</h2> 66 <div class="container"> 67 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 68 viewBox="0 0 200 200" style="width:200px; height:200px;"> 69 <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill="none"> 70 </rect> 71 </svg> 72 </div> 73 74 <h2>CSS compound</h2> 75 <div class="container"> 76 <div class="final box" id="ref"> 77 </div> 78 </div> 79 </div> 80 81 </body> 82 </html>
