Question

知道为什么这样可以在Chrome中运行而不是Safari吗？

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>

Answer 1

嗯，不真的是iOS不支持伪元素的动画，更多来自WebKit的错误。他们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/

Answer 2

iOS不支持伪类的动画。

该错误已于2013年1月2日（http://trac.webkit.org/changeset/138632）在Webkit中修复，因此我们可能希望这在iOS 7及更高版本中运行。

现在，您是否可以直接在元素上使用动画（即将.glow:after换成.glow，并将其更改为rgba动画而不是不透明度？）

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

2 个答案: