@-webkit-keyframe 动画 "content" 在 Safari 和 iOS 中不工作

Question

问题无法使 CSS @-webkit-keyframe 动画与内容标签一起使用。以下代码在 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;         
}

Answer 1

根据这个线程：

无法为伪元素的内容属性设置动画，桌面上的 Chrome 除外。所以你不能实现这个 throw css for IOS

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

@-webkit-keyframe 动画 "content" 在 Safari 和 iOS 中不工作

@-webkit-keyframe animation "content" isn't working in Safari and iOS

safari

webkit

keyframe

css-animations