7

知道为什么这适用于 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>
4

2 回答 2

4

好吧，并不是说 iOS 不支持伪元素上的动画，这更像是WebKit 的一个错误。他们在一月份解决了这个问题，并且由于 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/

于 2013-05-28T19:12:07.130 回答
3

iOS 不支持伪类上的动画。

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

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

于 2013-05-28T19:08:05.757 回答