CSS animations on <span>

Question

I am trying to apply CSS animation to a <span> element and I just can't get it to work. I cannot find a resource that says whether animations can be applied to <span> elements. So, am I making a mistake, or is there not enough animation?

Edit: Code

 Inf<span class="inf_o">o</span>rmation <br> do<span class="don_n">n</span>e <br> we<span class="dbl_l">ll</span> 

and css:

 /* 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;} } 

Answer 1

it looks like you should set the display property. Obviously, the block will spoil the word, so you need to use the built-in. I have prepared jsfiddle for you: http://jsfiddle.net/jdmiller82/XWkRX/1/

As you can see, o 'animates down.

Answer 2

It was not easy for me to get the animation of my range to work. In my case, the page loads with a display range of none . I tried many workarounds, but the one that worked at the end (unfortunately) removed display: none from css and hid it when the page loaded.

In case that matters, I use jQuery to hide / show the range.