Having problem with rotating text using css

Question

I am trying to change the text in the heading with the animation. however, I tried several ways but the animation always starts at 50% the content below 50% shows blank. I don't know whether I am conveying it properly this is my first time in stack overflow. Any help would be appreciated thank you.

 .our-service-heading{
    font-size: 40px;
    text-align: center;
}
#spin {
  color:rgb(255, 196, 0);
}
#spin:after {
  content:"";
  animation: spin 10s linear infinite;
}
@keyframes spin {
  0% { content:" Creative Commercials" }
  10% { content:" Explainer Videosr" }
  20% { content:" Corporate Documentary" }
  30% { content:" Cinematic Kickstarter Videos" }
  40% { content:" Creative Content & Script Writing" }
  50% { content: " Drone Filming" }
  60% { content: " Website Design & Advance Integration" }
  70% { content: " Professional Logo Designing" }
  80% { content: " Promotional Graphics Designing" }
  90% { content: " Corporate Event Coverage" }
}

<h2 class=" col-sm-12 our-service-heading  pt-4">
          We are making <span id="spin"> </span><br>better for everyone
      </h2>

Answer 1

Well, adding ; at the end of every CSS rule seems to work.

.our-service-heading {
  font-size: 40px;
  text-align: center;
}

#spin {
  color: rgb(255, 196, 0);
}

#spin:after {
  content: "";
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    content: " Creative Commercials";
  }
  10% {
    content: " Explainer Videosr";
  }
  20% {
    content: " Corporate Documentary";
  }
  30% {
    content: " Cinematic Kickstarter Videos";
  }
  40% {
    content: " Creative Content & Script Writing";
  }
  50% {
    content: " Drone Filming";
  }
  60% {
    content: " Website Design & Advance Integration";
  }
  70% {
    content: " Professional Logo Designing";
  }
  80% {
    content: " Promotional Graphics Designing";
  }
  90% {
    content: " Corporate Event Coverage";
  }
  100% {
    content: " Everything";
  } // added
}

<h2 class=" col-sm-12 our-service-heading  pt-4">
  We are making <span id="spin"> </span><br>better for everyone
</h2>