Using animation(CSS) on individual texts in HTML

November 21, 2022

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 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>

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