ManualTests/svg-css-animate-compound.html

   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>