Question

我正在尝试将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;}
}

Answer 1

看起来你必须设置一个显示属性。显然块会搞乱这个词，所以你需要使用内联。我为你做了一个jsfiddle：http://jsfiddle.net/jdmiller82/XWkRX/1/

正如你可以看到'o'动画下来。

Answer 2

只需添加display: inline-block;

Answer 3

我很难让我的span动画工作。就我而言，页面加载的范围From subprocess import Popen output='spice://127.0.0.1:5903' Command='remote-viewer'+' '+output #Proc=Popen(Command,shell=True) Proc=Popen(Command)设置为display。我尝试了许多解决方法，但最终工作的（不幸的是）是从css中删除none并在页面加载时隐藏它。

如果重要，我使用jQuery来隐藏/显示范围。

<span> </span>上的CSS动画

3 个答案: