如何显示css动画文本与正常文本内联?

Question

我试图显示一个句子，其中只有几个词在句子中是由CSS动画。虽然我可以使用<span>将单词内联，但动画停止工作。如果我把它包装成其他东西，比如<p>，动画会工作，但不会内联显示。

.scary p {
  animation: .8s shake infinite alternate;
}
.scary span {
  display: inline-block;
  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); }
}

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

如何显示动画的内联文本?

Answer 1

将span的显示改为inline-block。它必须是inline-block，而不是inline或block，因为动画使用skew，它只适用于inline以外的东西，并且您还需要块本身是内联的，因此inline-block。

.scary p {
  animation: .8s shake infinite alternate;
}
.scary span {
  display: inline-block;
  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); }
}

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