Safari 动画背景位置有制动动画

Question

我为视差动画制作了 css 个关键帧。在Chrome、Opera中，我的过渡很顺利。

在 Safari 中我有非常制动的动画。

@keyframes animatedParallelogram {
    0 {
        background-position: 1000px 0px;
        transform: translateX(-100%) scale(1.1);
    }
    100% {
        background-position: -1000px 0px;
        transform: translateX(100%) scale(1.1);
    }
}

@-moz-keyframes animatedParallelogram {
    0 {
        background-position: 1000px 0px;
        -moz-transform: translateX(-100%) scale(1.1);
    }
    100% {
        background-position: -1000px 0px;
        -moz-transform: translateX(100%) scale(1.1);
    }
}

@-webkit-keyframes animatedParallelogram {
    0 {
        background-position: 1000px 0px;
        -webkit-transform: translateX(-100%) scale(1.1);
    }
    100% {
        background-position: -1000px 0px;
        -webkit-transform: translateX(100%) scale(1.1);
    }
}

@-o-keyframes animatedParallelogram {
    0 {
        background-position: 1000px 0px;
        -o-transform: translateX(-100%) scale(1.1);
    }
    100% {
        background-position: -1000px 0px;
        -o-transform: translateX(100%) scale(1.1);
    }
}

你可以打开我的例子，往下滑试试：OPEN EXAMPLE

Answer 1

不幸的是，Safari 有制动动画，如果使用 CSS 将 «background-position» 动画和其他变换动画一起使用。

Safari 动画背景位置有制动动画

Safari animation background-position have braking animate

css

safari

google-chrome

css-transitions

css-animations