CSS发光动画关键帧在Chrome上工作，但在iOS Safari上不工作

你知道为什么这在Chrome上有效，但在Safari上无效吗

CSS:

HTML:

开始

iOS不支持虚拟类上的动画

该漏洞于2013年1月2日在Webkit中修复（），因此我们可能希望它在iOS 7及更高版本中也能正常工作

---

现在，你不能直接使用元素上的动画（例如，将

.glow:after

替换为

.glow

，并将其更改为rgba动画而不是不透明）？

好吧，iOS不支持伪元素上的动画，这更像是WebKit的一个bug。因为Chrome的快速更新，它现在可以在Chrome上运行，但在Safari上就不行了，无论是移动版还是桌面版

只在整个元素（

#btn

）上制作动画，而不是伪元素

.glow:after {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.5);
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    content: "";
    border-radius: 3px;
}

#btn {
    -webkit-animation-name:             glow;
    -webkit-animation-duration:         1s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
    background: red;
    text-align: center;
    font-size: 100px;
    color: white;
    line-height: 100px;
    opacity: 0;
}

---

谢谢你的回答，但是

：pseudo元素之后的要点是添加一个白色的“遮罩”，这样辉光可以在任何颜色上工作。这样，我的整个元素的不透明度就降低了，使它看起来更暗而不是发光。有没有办法让我做一个白色的面具，而不必在按钮前添加元素？@Garrett我刚刚更新了你的小提琴，也许你可以这样做：。在HTML上没有额外的元素，但是在CSS上做了更多的工作。在不添加额外标记的情况下，我认为这将是实现这一点的最简单方法，并让代码保持一点可重用性，而不是像使用伪元素那样。有时我们被迫让浏览器获胜：''（我认为这与Safari bug非常接近。谢谢！@pzin:请解释一下每行#btn行的CSS。很难理解我需要哪一行，如果我不需要相同的文本、字体、颜色和透明，我可以忽略，我还需要行高和所有这些吗？@YumYumYum你可以更改#btn

，只是不是动画规则，它仍然可以工作。这些线条只是用于造型，但它们根本不会改变动画。只需使用它们并使其适合您的需要即可。

<div id="btn" class="glow">
    Start
</div>

.glow:after {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.5);
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    content: "";
    border-radius: 3px;
}

#btn {
    -webkit-animation-name:             glow;
    -webkit-animation-duration:         1s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
    background: red;
    text-align: center;
    font-size: 100px;
    color: white;
    line-height: 100px;
    opacity: 0;
}