在HTML中的单个文本上使用动画(CSS)

Question

我的HTML是这样的

谁能告诉我为什么它不动?我期待每一个单独的文本

.ending-credit {
padding-top: 200px;
text-align: center;
}
.end {
animation-duration: 4s;
animation-name: sway;
animation-iteration-count: infinite;
}
@keyframes sway {
0%,
100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(20deg);
}
}

<p class="ending-credit">
<span class="end">I</span>
<span class="end">w</span>
<span class="end">i</span>
<span class="end">l</span>
<span class="end">l</span>
<span class="end">r</span>
<span class="end">e</span>
<span class="end">t</span>
<span class="end">u</span>
<span class="end">r</span>
<span class="end">n</span> ...
</p>

嵌套来做动画，但不知怎么的，我输入了错误的代码。有人能帮忙吗?

Answer 1

这可能是因为您不能简单地转换内联元素。尝试将display: inline-block设置为字符的css。