CSS 动画关键帧在 Iphone/Ipad 上不起作用

Question

我制作了一个关键帧动画，其中单词在句末移动。它适用于 Chrome，但不适用于 Safari。

我做错了什么？

这是 CSS 代码：

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

Answer 1

根据 CSS 规范，content 属性不可设置动画。 Here is a list of properties that can be animated. Chrome does support it nonetheless since 2020. (See also this CSS-Tricks article关于问题）

要在所有浏览器中使用此功能，您可以使用 JavaScript 或为每个 content 值制作不同的元素，并单独设置其显示或不透明度值的动画。

CSS 动画关键帧在 Iphone/Ipad 上不起作用

CSS Animation Keyframes not working on Iphone/Ipad

css

safari

animation

keyframe