Using animation(CSS) on individual texts in HTML-CodePudding

My HTML is like this

Can someone please tell me why it won't even budge?

I was expecting each individual text

.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 >
  <span >I</span>
  <span >w</span>
  <span >i</span>
  <span >l</span>
  <span >l</span>
  <span >r</span>
  <span >e</span>
  <span >t</span>
  <span >u</span>
  <span >r</span>
  <span >n</span> ...
</p>

nested in to do the animation, but somehow I typed in the wrong code. Can someone help out?

CodePudding user response：

It's probably because you can't simply transform inline elements. Try setting display: inline-block to the characters' css.