如何让CSS动画文本与普通文本行内显示？

核心解决方法 #

用<span>标签配合display: inline-block即可实现——既能让动画生效，又能保持文本和普通内容同行显示。

修正后的完整代码 #

CSS代码

.scary span {
  display: inline-block; /* 必须：让span支持transform动画 */
  animation: .8s shake infinite alternate;
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}

HTML代码

<div class="scary">
  Something has gone <span>terribly wrong</span>, what should we do?
</div>

原理说明 #

• <p>是块级元素，默认独占一行，会打断文本流，但天然支持transform属性，所以动画能运行；
• <span>默认是行内元素，不支持transform，因此动画失效；设置display: inline-block后，它既保留了行内布局的特性（和其他文本同行），又获得了块级元素的属性支持（能执行transform动画）。

内容的提问来源于stack exchange，提问作者AlwaysNeedingHelp