@-webkit-keyframe 动画“内容”在 Safari 和 iOS 中不起作用答案

【问题标题】：@-webkit-keyframe animation "content" isn't working in Safari and iOS@-webkit-keyframe 动画“内容”在 Safari 和 iOS 中不起作用
【发布时间】：2021-05-23 07:42:04
【问题描述】：

问题无法让 CSS @-webkit-keyframe 动画与 content-tag 一起使用。以下代码在 Chrome 和 Firefox 上运行良好，但 Safari 仍不显示“STRING1”。我已经尝试了论坛中的所有内容，但仍然无法正常工作。有人能帮我吗？非常感谢。

html:

<h1>TEST:<span></span></h1>

css:

@-webkit-keyframes textchange {
    0% {content: 'STRING1';}
    30% {content: 'SRING2';}   
    60% {content: 'STRING3';}
    100% {content: 'STRING1';}  
}

@-moz-keyframes textchange {
    0% {content: 'STRING1';}
    30% {content: 'SRING2';}   
    60% {content: 'STRING3';}
    100% {content: 'STRING1';} 
}

@-o-keyframes textchange {
    0% {content: 'STRING1';}
    30% {content: 'SRING2';}   
    60% {content: 'STRING3';}
    100% {content: 'STRING1';} 
}

@keyframes textchange {
    0% {content: 'STRING1';}
    30% {content: 'SRING2';}   
    60% {content: 'STRING3';}
    100% {content: 'STRING1';} 
}

h1 span::before{
    content:'STRING1';   
    -webkit-animation-name: textchange;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-direction: normal;
    -webkit-animation-delay:0.01s;
    -webkit-animation-fill-mode: forwards;
    -o-animation:  textchange 6s linear 0.01s infinite;
    -ms-animation:  textchange 6s linear 0.01s infinite;
    -moz-animation:  textchange 6s linear 0.01s infinite;
    animation: textchange 6s linear 0.01s infinite;         
}

【问题讨论】：

标签： safari webkit css-animations keyframe

【解决方案1】：

根据这个帖子：css animation on "content:" doesn't work on Safari and Firefox

除了桌面版 Chrome 之外，无法为伪元素的 content 属性设置动画。所以你不能为IOS实现这个扔css

你必须使用 Javascript 我会使用带有 if 语句的循环来检查当前的 inner.html 值，以在一段时间后更改值文本（setTimeOut 或 setInterval）

【讨论】：

非常感谢您的快速回复！它完美无缺！ :-)