Question

当放大和缩小，或在标签之间移动时，Chrome浏览器会破坏圆圈div的动画。

例如，检查此动画：

body {
    background-color: orange;
}

.child {
    position: absolute;
    animation: ripple 6s 0.5s ease-out infinite;
    background-color: #FFF;
    opacity: 0.9;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}

@keyframes ripple {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        80%, 100% {
          transform: scale(500);
          opacity: 0;
        }

在镶边，放大和缩小（Ctrl +/-）中，会将圆圈更改为矩形/正方形。

此外，尝试使用F5刷新，在刷新移动到另一个选项卡期间等待2-3秒，然后返回到jsfiddle选项卡。它通常也会破坏动画（有时难以重现）。

有更多场景导致动画被破坏。

在Firefox中，一切都很棒。在Firefox中尝试这些场景，您将看到动画按预期工作。

Answer 1

找到了解决方法：

div的初始大小应大于2px和1 px边界半径。

它解决了大部分问题，例如放大和缩小。

http://jsfiddle.net/ghuhfya5/17/

body {
    background-color: orange;
}

.child {
    position: absolute;
    animation: ripple 6s 0.5s ease-out infinite;
    background-color: #FFF;
    opacity: 0;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    left: 50%;
    top: 50%;
}

@keyframes ripple {
        0% {
          transform: scale(0.0025);
          opacity: 0.9;
        }
        80%, 100% {
          transform: scale(12.5);
          opacity: 0;
        }

Chrome将圆形动画转换为squres

1 个答案: