Преобразование ключевого кадра не работает на сафари и краю

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. Не большая проблема, если большой экран используется, поскольку все еще видно ( вы можете увидеть пример здесь), но это означает, что я не могу перевести элементы туда, куда я хочу, на маленький экран.
Я работал над этим более одного дня, единственный ответ, который я нашел, был о пропущенных скобках, но я проверил свой код, и все скобки сбалансированы. Любая помощь могла бы быть полезна.

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 вообще не учитывают CSS-преобразования элементов SVG. Вместо этого вы должны присвоить значение атрибуту transform.
• Firefox не учитывал происхождение на основе% в ранних версиях (в последних версиях это так).
• Масштабирование в Safari нарушает синхронизацию между исходниками на основе% и px.
• Firefox не распознает происхождение, основанное на ключевых словах, например, "справа внизу", и Safari изменяет их, когда масштаб не равен 100%.
• Во всех браузерах происхождение на основе px измеряется по-разному для элементов SVG по сравнению с другими элементами DOM (см. Ниже).

цитата из документа о SVG преобразованиях в css-трюках

Я обнаружил, что использование таких библиотек, как TweenMax, довольно хорошо работает практически со всеми браузерами. Конечно, есть некоторые конкретные способы, которыми вы должны анимировать некоторые свойства, чтобы они могли работать в IE 11. Немногие из них: - Радиус круга - переходы

Вы можете проверить советы и рекомендации для инструмента в css-tricks: