Edit on
<h1>CSS Animations & SVG <code>&lt;use></code> elements</h1>
<p>A follow-up to my examination of <a href="https://codepen.io/AmeliaBR/full/lshrp">bugs with CSS Transitions and the SVG <code>&lt;use></code> element.</a>
</p>
<svg>
  <circle id="c" r="20"/>
  <use xlink:href="#c" fill="blue" transform="translate(150,0)"/>
  
</svg>
<figure><div class="bounce">Bouncing Text</div></figure>

<p>It's not quite as broken as the transitions, but it's still not consistent cross-browser:</p>
<ul>
  <li><p>In webkit (Chrome 34 and Opera 20)<p>
    <p>Only the original circle animates, the <code>&lt;use></code> element stays still.</p>
    <p>Also, the <code>currentColor</code> stroke setting doesn't animate with the change in the <code>color</code> property.</p></li>
  <li><p>In Firefox (29)<p>
    <p>Both circles animate, as does the  <code>currentColor</code> stroke.</p></li>
  <li><p>In InternetExplorer 11</p>
    <p>Nothing in the SVG animates; IE doesn't support (non-script) SVG animation no matter how it is defined.</p>
</ul>
<p>All the browsers tested animate the <code>&lt;div></code> text position & color just fine (given the proper prefixes for webkit).
</p>
svg, figure {
  height:200px;
  width:45%; 
  margin:2%;
  display:inline-block;
  border:1px solid;
  vertical-align:top;
  overflow:hidden;
}
circle, div.bounce {
  stroke-width:3px;
  stroke:currentColor;
  -webkit-animation:bounce 5s alternate infinite;
  animation:bounce 5s alternate infinite;
}
@keyframes bounce {
  0% { 
    color:black;
    -webkit-transform:translate(0,0);
    transform:translate(0,0);
  }
  50% { 
    color:red;
    -webkit-transform:translate(50px,100px);
    transform:translate(50px,100px);
  }
  100%{ 
    color:black;
    -webkit-transform:translate(100px,10px);
    transform:translate(100px,10px);
  }
}
@-webkit-keyframes bounce {
  0% { 
    color:black;
    -webkit-transform:translate(0,0);
    transform:translate(0,0);
  }
  50% { 
    color:red;
    -webkit-transform:translate(50px,100px);
    transform:translate(50px,100px);
  }
  100%{ 
    color:black;
    -webkit-transform:translate(100px,10px);
    transform:translate(100px,10px);
  }
}
h1 {text-align:center; border-bottom:solid;}
body {max-width:50em;}
p code, figureCaption code {
  display:inline-block;
  background:#e0e8ff;
  padding:0.2em;
}
li {
  margin: 0.5em 0;
}
li p {
  margin:0.3em 0;
}
li p:first-of-type {
  font-weight:bold;
}
Rerun