Safari 动画背景-位置有刹车动画答案

【问题标题】：Safari animation background-position have braking animateSafari 动画背景-位置有刹车动画
【发布时间】：2020-11-15 02:15:27
【问题描述】：

我为视差动画制作 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

【问题讨论】：

尝试将 % 添加到 0
这能回答你的问题吗？ CSS3 animation not working in safari
当我使用 % 时，背景位置不会移动。

标签： css google-chrome safari css-animations css-transitions

【解决方案1】：

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

【讨论】：