Question

我有一个可以在Firefox，Chrome上正常运行的动画，但在Safari和Edge上无效。动画对象包含在用js加载的svg文件中。这个想法是元素连续出现在屏幕的中心，然后向上移动到预期的最终位置。

我用来实现这个目的的一个例子是：

@-webkit-keyframes move-you {
    0% { 
        opacity: 0;
        -webkit-transform: translate(450px,400px);
                transform: translate(450px,400px);

    }
    50% { 
        opacity: 1;
        -webkit-transform: translate(450px,400px);
        transform: translate(450px,400px);
    }
    100% { 
        opacity: 1;
        -webkit-transform: translate(450px,222px);
        transform: translate(450px,222px);

    }
}
@keyframes move-you {
    0% { 
        opacity: 0;
        -webkit-transform: translate(450px,400px);
                transform: translate(450px,400px);
    }
    50% { 
        opacity: 1;
        -webkit-transform: translate(450px,400px);
                transform: translate(450px,400px);
    }
    100% { 
        opacity: 1;
       -webkit-transform: translate(450px,222px);
               transform: translate(450px,222px);

   }
}

.svgLoaded #you { 
-webkit-animation: move-you 1s ease-in 3s; 
        animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards; 
}

因此，这在Firefox和Chrome上运行良好，但在Safari和Edge中不会发生翻译。如果使用大屏幕，因为一切仍然可见，这不是一个大问题，（you can see example here）但这意味着我无法在小屏幕上将项目翻译到我想要的位置我已经堆叠了这一天超过一天，我找到的唯一答案是关于缺少括号但我检查了我的代码并且所有括号都是平衡的。任何帮助都会非常感激。

Answer 1

我认为这可能有用：

@-webkit-keyframes move-you {
    0% { 
        opacity: 0;
        -webkit-transform: translate(450px,400px);
    }
    50% { 
        opacity: 1;
        -webkit-transform: translate(450px,400px);
    }
    100% { 
        opacity: 1;
        -webkit-transform: translate(450px,222px);
    }
}
@keyframes move-you {
    0% { 
        opacity: 0;
                transform: matrix(1,0,0, 1,0,0, 450, 400);
    }
    50% { 
        opacity: 1;
                transform: translate(1,0,0, 1,0,0, 450, 400);
    }
    100% { 
        opacity: 1;
               transform: translate(1,0,0, 1,0,0, 450, 222);

   }
}

.svgLoaded #you { 
-webkit-animation: move-you 1s ease-in 3s; 
        animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards; 
}

Answer 2

在不同的浏览器上制作SVG动画存在很多问题。他们都工作不同。

以下是使用SVG创建一致动画的一些问题：

IE 和 Opera 根本不支持SVG元素上的CSS转换。相反，您必须将值分配给转换属性。
Firefox 在早期版本中不支持基于％的来源（最新版本）。
放大 Safari 会打破基于％和基于px的来源之间的同步。
Firefox无法识别像“右下角”这样的基于关键字的来源，而当缩放不是100％时，Safari会改变它们。
在所有浏览器中，对于SVG元素，基于px的原点的测量方式与其他DOM元素的测量方式不同（见下文）。

引用css-tricks

中关于SVG转换的文档

我发现使用像TweenMax这样的库可以很好地与几乎所有的浏览器一起工作。当然，有一些特定的方法可以为某些属性设置动画，以便它们可以在IE 11上运行。其中很少有： - 圆半径 - 过渡

您可以在css-tricks中查看该工具的提示和技巧：

关键帧变换翻译不适用于safari和edge

2 个答案: