html - 动画在 chrome 中不起作用

Question

谁能告诉我为什么闪烁效果在 chrome 浏览器中不起作用

<p class="blink">at least it's not Comic Sans</p>
<style>

.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
@keyframes blink {
80% {
    visibility: hidden;
}
}

</style>

而且我还要求它能在所有 iOS 和 Android 设备上运行。请提出建议。

Answer 1

您缺少动画和关键帧的 -webkit 前缀。

首先，作为引用，请尝试这个:Tryit from W3School

特别是在chrome中，动画、变换等东西需要-webkit前缀。阅读我的引用资料后，您应该可以自己做。

但无论如何，这是解决方案。在这里查看结果:JSFiddle

.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);

animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}

@-webkit-keyframes blink {
80% {
    visibility: hidden;
}
}

@keyframes blink {
80% {
    visibility: hidden;
}
}

您现在可以继续阅读有关前缀的更多信息(只需谷歌搜索即可)