CSS animation working on Chrome but not on Safari and IOS-CodePudding

I have a website where the content changes automatically as shown below.

But it doesn't work on IOS and safari.

Does spin not work here? or am i doing something wrong?

If it's an issue with IOS and Safari, How can i have a fallback text so that it doesn't look empty

#spin {
  color: red;
}

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

@keyframes spin {
  0% {
    content: "Hello 1";
  }
  25% {
    content: "Hello 2";
  }
  50% {
    content: "Hello 3";
  }
  75% {
    content: "Hello 4";
  }
  100% {
    content: "Hello 5";
  }
}

<h1>
  Say a warm <br/> <span id="spin"></span>
</h1>

CodePudding user response：

Safari has issues when it comes to animate the content property. Do this instead:

#spin {
  color: red;
  line-height: 1.2em;
  height: 1.2em;
  overflow: hidden;
  display: inline-block;
}

#spin:after {
  content: "Hello 1\A Hello 2\A Hello 3\A Hello 4\A Hello 5";
  display: block;
  white-space: pre;
  animation: spin 4s infinite steps(5);
}

@keyframes spin {
  100% {
    transform: translateY(-100%)
  }
}

<h1>
  Say a warm <br/> <span id="spin"></span>
</h1>

CodePudding user response：

Replace this:

#spin {
  color: #red;
}

With this:

#spin {
  display: block;
  color: #red;
}

I´ve read it also works using:

display: inline-block;