title: CSS animations on <span>
body: <p>I am trying to apply a CSS animation to a <code>&lt;span&gt;</code> element and I just can't get it to work. I can't find any resource that says whether animations can be applied to <code>&lt;span&gt;</code> elements. So, is it me that is making an error, or are spans animation immune?</p>
  
  <p>Edit: Code</p>
  
  <pre><code>Inf&lt;span class="inf_o"&gt;o&lt;/span&gt;rmation
      &lt;br&gt;
  do&lt;span class="don_n"&gt;n&lt;/span&gt;e
      &lt;br&gt;
  we&lt;span class="dbl_l"&gt;ll&lt;/span&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>/* animations */
  .inf_o 
  {
    -webkit-animation-name: lower_head;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-delay: 1s;
    -webkit-animation-play-state: active;  
  }
  
  @-webkit-keyframes lower_head
  {
    from {margin-top:0px;}
    to {margin-top:10px;}
  }
  </code></pre>