CODEWITHSUNDEEP
htmlcss
providence
providence

Reputation: 29463

CSS animations on <span>

I am trying to apply a CSS animation to a <span> element and I just can't get it to work. I can't find any resource that says whether animations can be applied to <span> elements. So, is it me that is making an error, or are spans animation immune?

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

Upvotes: 11

Views: 23520

Answers (3)

Leo
Leo

Reputation: 415

just add display: inline-block;

Upvotes: 8

RatherBKnitting
RatherBKnitting

Reputation: 421

I had a hard time getting my span animation to work. In my case, the page loads with the span's display set to none. I tried many work-arounds but the one that worked in the end (unfortunately) was removing the display: none from css and hiding it when the page loads.

In case it matters, I am using jQuery to hide/show the span.

Upvotes: 0

Jonathan Miller
Jonathan Miller

Reputation: 1786

looks like you have to set a display property. Obviously block will mess up the word, so you need to use inline. I cooked up a jsfiddle for you: http://jsfiddle.net/jdmiller82/XWkRX/1/

As you can see the 'o' animates down.

Upvotes: 14

Related Questions