Анимация с клип-траекторией: в Safari не работает вставка - PullRequest
Новая
       52

Анимация с клип-траекторией: в Safari не работает вставка

0 голосов
/ 04 ноября 2019

Я анимировал клип-путь, который отлично работает на Chrome и Firefox, но Safari полностью игнорирует анимацию. После тестирования я обнаружил, что мои статические пути клипов в Safari работают нормально, но он не хочет их анимировать. Вот мой css: 

.home .arc-line img {
    -webkit-animation-name: mobile-arc;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes mobile-arc {
  0% { -webkit-clip-path: inset(0 100% 0 0); }
  80% { -webkit-clip-path: inset(0 100% 0 0); }
  100% { -webkit-clip-path: inset(0 0 0 0); }
}

Он находится на мобильной версии (ширина экрана 400 пикселей) целевой страницы следующего веб-сайта: www.satya-ame-art.com Это белая линия дуги в центре страницы, которая должна анимироваться слева направо, но остается неизменной в Safari.

Заранее большое спасибо!

1 Ответ

0 голосов
/ 04 ноября 2019

Хорошо, не найдя способа исправить ошибку, единственный обходной путь, который я нашел, состоял в том, чтобы отказаться от анимированной идеи пути клипа и заменить ее встроенным SVG, анимированным благодаря «Анимированная каллиграфия с SVG». техника.

Это было намного больше работы, но результат был визуально идентичным, если не лучше.

...