<span>上的CSS动画
<span>上的CSS动画
提问于 2011-07-30 12:18:03
我正在尝试将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;}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2011-07-30 12:48:10
看起来你必须设置一个显示属性。很明显，block会把单词搞乱，所以你需要使用inline。我为您准备了一个jsfiddle：http://jsfiddle.net/jdmiller82/XWkRX/1/
正如你所看到的'o‘动画向下。
Stack Overflow用户
发布于 2021-01-20 02:48:45
只需添加display: inline-block;
Stack Overflow用户
发布于 2017-12-06 23:54:08
我有一段时间很难让我的跨度动画工作。在我的例子中，页面加载时将跨度的display设置为none。我尝试了许多变通方法，但最后有效的一个(不幸的)是从css中删除display: none，并在页面加载时隐藏它。
如果这很重要，我使用jQuery来隐藏/显示跨度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6881045
复制相关文章
相似问题
腾讯云开发者
