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

Posted 2023-03-06

【中文标题】Safari 动画背景-位置有刹车动画

【英文标题】：Safari animation background-position have braking animate

【发布时间】：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

当我使用 % 时，背景位置不会移动。

【参考方案1】：

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