CSS动画在<span>标签上的应用

Question

我试图对一个 <span> 元素应用 CSS 动画，但是我无法使其起作用。我找不到任何资源表明动画是否能够应用于 <span> 元素。所以，是我犯了错误，还是 <span> 标签无法使用动画效果？

编辑：代码

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>

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

- providence

---

你能否在这里分享你的当前代码，或者提供一个在线编辑器（fiddle）的链接？ - Purag

你可能需要在CSS中为span定义display:block。 - sandeep

将代码放在编辑器中。当我指定display:block;时，它可以工作。有没有一种方法可以不使用块元素来完成这个操作？我想避免使用大量的浮动和清除。 - providence

Answer 1

看起来你需要设置一个显示属性。显然，块状元素会搞乱文字，所以你需要使用内联样式。我为你准备了一个jsfiddle：http://jsfiddle.net/jdmiller82/XWkRX/1/

如你所见，'o'会向下动画。

- Jonathan Miller

---

在您的jsfiddle中，内联显示（display inline）对我没有效果，但内联块级元素（inline-block）有效。谢谢！ - Josh

Answer 2

只需要添加 display: inline-block; 即可。

- Leo

Answer 3

我在实现 span 动画时遇到了困难。在我的情况下，页面加载时 span 的 display 属性被设置为 none。我尝试了许多解决方法，但最终起作用的（不幸的是）是从 CSS 中删除 display: none 并在页面加载时隐藏它。

如果有影响的话，我正在使用 jQuery 来隐藏/显示这个 span。

- RatherBKnitting