< span>上的CSS动画 [英] CSS animations on <span>

问题描述

我正在尝试将CS​​S动画应用于< span> 元素，但我无法使其工作。我找不到可以将动画应用于< span> 元素的资源。所以，是我犯了一个错误，还是跨越动画免疫？

编辑：代码

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

和css：

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

解决方案

看起来像您必须设置一个显示属性。很显然，block会混淆这个词，所以你需要使用inline。我为你制作了一个jsfiddle： http://jsfiddle.net/jdmiller82/XWkRX/1/

正如你可以看到'o'动画一样下降。

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

解决方案

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.

这篇关于< span>上的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！