[Codepen]
Итак, это действительно странно.Я изучаю @keyframes и создал действительно простую анимацию, просматриваю учебник на YouTube и добавляю свою собственную интуицию для создания анимации, отличной от показанной в видео.
Мой код действительно прост,В нем есть текст SVG, который я скопировал из Adobe XD и применил к нему простую анимацию.
Со стороны CSS я сначала скрываю SVG, используя stroke-dashoffset, равный -300, а затем предоставляю анимацию:длительность 6 с, без повтора, в направлении forwards и задержкой 0,5 с и добавление имени анимации ключевого кадра sv-text, которое я определяю как:
Где dashoffset достигает 0 при 50%и затем до -20 при 100% для создания эффекта «разбитого текста». Моя проблема в том, что это работает абсолютно так, как и ожидалось, в Firefox и Chrome, но в Safari он работает, но в обратном направлении!Это означает, что анимация начинается с stroke-dashoffset: 0 (полностью видимый), затем переходит к stroke-dashoffset: -300 (полностью скрытый), а затем к stroke-dashoffset: -280 (только частично видимый).Есть ли какая-то конкретная причина, по которой это происходит?
Я пытался изучить эту документацию от Apple, но она не говорит ничего другого.Если бы кто-нибудь мог помочь мне понять, что происходит, это было бы действительно здорово!
Вы можете открыть ссылку на кодовый блок в Chrome и Firefox, и вы увидите, что анимация работает просто отлично, но если выоткройте его в Safari, анимация работает в другом направлении, чем указано!
Спасибо!