How to display css animated text inline with normal text? [duplicate] - css

Question

This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 4 months ago.
I'm trying to display a sentence where only a few words in the sentence are animated by CSS. While I can get the words inline using <span>, the animation stops working. If I wrap it in something else like <p> the animation works but doesn't display inline.
.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>
How can I display inline text that is animated?

Answer 1

Change the display of the span to inline-block. It has to be inline-block specifically and not inline or block since the animation uses skew, which only works on things that aren't inline, and you also need the block itself to be inline, hence 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>