Question

有时，执行css动画时，Safari会使动画闪烁。我一直在寻找解决方案，但我找不到任何工作。

我有以下HTML（缩短，请参阅jsfiddle以获得更多乐趣）

<div class="dot"></div>

以下CSS

.dot {
    width: 8px;
    height: 8px;
    background-color: #1A3853;
    border-radius: 50%;
    z-index: 1;
    margin: 20px;
    position: relative;
    float: left;
}

.dot:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    background-color: #237CC6;
    border-radius: 50%;
    opacity: .7;
    z-index: -1;

    animation-name: fading;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    -webkit-animation-name: fading;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes fading {
    from  { height: 8px; width: 8px; margin-left: -4px; top: 0; opacity: .7; }
    99%   { height: 26px; width: 26px; margin-left: -13px; top: -9px; opacity: 0; }
    to    { }
}

@keyframes fading {
    from  { height: 8px; width: 8px; margin-left: -4px; top: 0; opacity: .7; }
    to    { height: 26px; width: 26px; margin-left: -13px; top: -9px; opacity: 0; }
}

Chrome和Firefox都能完美无瑕地执行动画，但Safari偶尔也会惊慌失措。我已经尝试了所有提到here和here的内容，但它似乎并没有为我解决。

Answer 1

我遇到了同样的问题 - 并且可以在apache配置中使用正确的服务器时间来解决它。

如何防止safari @ -webkit-keyframe动画闪烁

1 个答案: