Анимация не работает в Safari - PullRequest
Новая
       22

Анимация не работает в Safari

0 голосов
/ 27 июня 2018

У меня есть анимация CSS3, над которой я работаю для своего веб-сайта, на котором анимирован stroke-dashoffset SVG. Он отлично работает на Chrome и Opera, но не работает на Safari или Firefox. В Safari текст отображается, но не анимируется. В Firefox текст вообще не отображается. Для меня очень важно, чтобы Safari работал так, чтобы он корректно отображался на iOS.

Я уже пробовал кучу вещей, включая изменение единиц измерения, использование процентных ключевых кадров вместо to и from, добавление и удаление префиксов, не использование сокращений для свойств анимации, изменение различных свойств, пробование различных веб-пакетов префиксы, двойная проверка, что я не анимирую stroke-dashoffset с использованием отрицательных чисел и т. д., и до сих пор ничего не получалось. Я просмотрел каждую статью, которую смог найти в Интернете, и не нашел решения. Я надеюсь, что это что-то простое, что я пропускаю или что есть простой обходной путь, но я боюсь, что это ошибка веб-набора.

Я поместил ниже JSfiddle, который повторяет проблему в Safari и Firefox и работает правильно в Chrome: https://jsfiddle.net/lystroid/2a97ntf1/58/

Вот соответствующие HTML и CSS:

HTML 

<svg width="80vw" height="150vw">
  <text y = "500px" fill="none" stroke="#e2e2e2" stroke-width="0.5">ABCDE</text>
</svg>

CSS 

text {
  font-family:arial;
  text-align: center;
  color: #e2e2e2;
  font-size: 23vw;
  line-height: 0;
  stroke-dasharray: 98vw;
  stroke-dashoffset: 98vw;
  animation: draw 7s ease 1 forwards;
  -webkit-animation: draw 7s ease 1 forwards;
  -moz-animation: draw 7s ease 1 forwards;
  -webkit-animation: draw 7s ease 1 forwards;
  -o-animation: draw 7s ease 1 forwards;
  -ms-animation: draw 7s ease 1 forwards;
}

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 98vw;
  }
  to {
    stroke-dashoffset: 0vw;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 98vw;
  }
  to {
    stroke-dashoffset: 0vw;
  }
}

Я не проверял анимацию в Internet Explorer или Edge.

Спасибо за чтение!

РЕДАКТИРОВАТЬ: я должен уточнить, что на странице есть две анимации. Один из них для заголовка, который хорошо работает во всех браузерах. Анимация, о которой я говорю в этом вопросе, - это анимация в тексте SVG с надписью «ABCDE»

...