时间戳

首页 > 解决方案 > @-webkit-keyframe animation "content" isn't working in Safari and iOS

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

问题描述

Problem Having trouble getting CSS @-webkit-keyframe animations to work with the content-tag. The following code works great on Chrome and Firefox, but Safari doesn't shows still “STRING1”. I've tried everything from the forum, but it still doesn't work. Can someone help me? Thank you so much.

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

标签： safariwebkitcss-animationskeyframe

解决方案

根据这个线程：“内容：”上的 css 动画在 Safari 和 Firefox 上不起作用

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

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

推荐阅读