keyframe transform translate не работает на сафари и краю

Question

У меня есть анимация, которая отлично работает на Firefox, Chrome, но не работает на Safari и Edge. Объекты анимации содержатся в файле svg, загружаемом js. Идея состоит в том, что элементы появляются последовательно в центре экрана, а затем переходят к их предполагаемому окончательному местоположению.

Пример 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 в разных браузерах. Все они работают по-другому.

Вот некоторые из проблем, связанных с созданием последовательной анимации с SVGs:

• IE и Opera не почитаете CSS трансформирует вообще на SVG элементов. Вместо этого вы должны присвоить значение преобразованию атрибут.
• Firefox не получил почтовые отправления в ранних версиях (в последних версиях).
• Масштабирование в Safari прерывает синхронизацию между источниками на основе% и px.
• Firefox не распознает ключевые слова, основанные как «правое нижнее», а Safari изменяет их, когда масштаб - это всего лишь 100%.
• Во всех браузерах исходные пиксели по-разному измеряются для элементов SVG, чем другие элементы DOM (см. Ниже).

котировка документа о SVG преобразований в css-tricks

Я обнаружил, что с помощью библиотеки 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; 
}