css - 关键帧转换翻译不适用于 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

我认为这可能会起作用:

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