CSS发光动画关键帧适用于Chrome,但不适用于iOS Safari

知道为什么这适用于Chrome但不适用于Safari吗?

http://jsfiddle.net/tTxMV/

CSS:

@-webkit-keyframes glow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.glow:after {
    -webkit-animation-name:             glow;
    -webkit-animation-duration:         1s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
    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;
    opacity: 0;
}

#btn {
    background: red;
    text-align: center;
    font-size: 100px;
    color: white;
    line-height: 100px;
}

HTML:

<div id="btn" class="glow">
    Start
</div>
最佳答案
好吧,iOS并不支持伪元素的动画,它更像是WebKit的一个bug.它们solved it in January以及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;
}

http://jsfiddle.net/tTxMV/2/

转载注明原文:CSS发光动画关键帧适用于Chrome,但不适用于iOS Safari - 代码日志