Моя цель - правильно загрузить анимацию CSS в Safari. В настоящее время анимация работает на Chrome и Brave, но она не работает корректно на моем браузере Safari iPhone. Вот jsfiddle: https://jsfiddle.net/plutownium/3ne7dwvp/9/
Если вы откроете страницу и нажмете «запустить» в верхнем левом углу, вы увидите воспроизведение анимации, как и положено, если вы загрузите ее на Chrome. Что я ищу, так это чтобы анимация «скользила» слева и заполняла фоновый div. Он делает это правильно - насколько я знаю - во всех браузерах, кроме Safari.
Я использую @-webkit-keyframes специально для анимации ... так что я не скучаю по этим ...
Я попытался изменить индикаторы ключевых кадров веб-набора с to и from на 0%, 100%, как в этот ответ Stackoverflow :
@-webkit-keyframes hideBlack {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
}
, но анимация все еще не работает. Я просто вижу серый прямоугольник.
Чтобы добавить больше примеров того, что не работает, просмотрите 2 верхних ответа здесь . Цитата: «В Safari, когда вы используете ключевые кадры, вам нужно использовать весь процент», чтобы анимация «раскрытия» и «hideBlack» не работала в браузере сафари моего телефона.
Я пытался следовать этой странице advice , "Safari не читает через сокращенный метод описания анимации [...] Его нужно описать более подробно с указанием отдельных его свойств", но он также не загружается в Safari (только серый прямоугольник снова): https://jsfiddle.net/plutownium/3ne7dwvp/15/
* обратите внимание, что вторая ссылка jsfiddle хронологически после предыдущей ссылки
Я также добавил следующие строки в Мои css классы с начала моего предприятия:
-webkit-animation-name: hideBlack;
-webkit-animation-duration: 0.75s;
&
-webkit-animation-name: reveal;
-webkit-animation-duration: 0.75s;
, но анимация все равно не воспроизводится Есть только куча серого, заполняющая div s, где я ожидаю увидеть скользящий желтый / белый со стороны с черным текстом.
Опять мой самый последний минимальный воспроизводимый пример: доступны по jsfiddle по этой ссылке: https://jsfiddle.net/plutownium/3ne7dwvp/15
Я начинаю подозревать, что не правильно внедрил одно из решений. Дайте мне знать в комментариях, если я испортил свою скрипку ...