关键帧转换翻译不适用于 safari 和边缘

Question

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

我用来实现此目的的 css 示例是：

@-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

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

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

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

引用css-tricks中有关 SVG 转换的文档

我发现使用 TweenMax 之类的库在几乎所有浏览器上都做得很好。 当然，您应该通过一些特定的方式为某些属性设置动画，以便它们可以在 IE 11 上运行。其中很少有： - 圆半径 - 过渡

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

Answer 2

我认为这可能会起作用：

@-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; 
}