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>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>Replace this:
#spin {
color: #red;
}
With this:
#spin {
display: block;
color: #red;
}
I´ve read it also works using:
display: inline-block;