I have made a keyframe animation with words shifting in the end of the sentence. It works in Chrome, but doesn't work in Safari.
What am I doing wrong?
This is the CSS code:
.aboutvision span:before {
content: '';
animation: about-vision 8s infinite;
color: #faf9f4;
text-decoration: underline;
display: inline-block;
}
@keyframes about-vision {
0%{
content: 'GROW';
}
25%{
content: 'THRIVE';
}
50%{
content: 'UNFOLD';
}
75%{
content: 'EVOLVE';
}
100%{
content: 'GROW';
}
}
CodePudding user response:
The content
property is no animatable according to the CSS spec. Here is a list of properties that can be animated. Chrome does support it nonetheless since 2020. (See also this CSS-Tricks article on the issue)
To make this work across all browsers you could use JavaScript or make a different element for each content
value and animate their display or opacity values individually.