'CSS Animation Keyframes not working on Iphone/Ipad

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';
    }
}
cssanimationsafarikeyframe


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JP_

Related Questions