Мерцание и дёрганье текста в конце анимации

Вопрос-ответ HTML/CSS
1

Всем привет! Вроде, я далеко не новичок в HTML-CSS, но иногда возникают головоломные вопросы. Вот воспроизводимый кусок кода:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      min-height: 100vh;
      background-color: black;
    }

    .wrapper {
      position: relative;
      top: 60px;
      transform: rotateX(90deg) scale(0);
      animation: flight 1.5s ease-in-out forwards;
    }

    @keyframes flight {
      to {
        transform: rotateX(50deg) scale(1);
      }
    }

    .vinyl {
      position: relative;
      width: 450px;
      height: 450px;
      background-color: red;
      border-radius: 50%;
      animation: rotation 12s linear infinite 3s;
    }

    @keyframes rotation {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(-360deg);
      }
    }

    .warning {
      position: absolute;
      width: 105%;
      height: 105%;
      top: -7px;
      left: -15px;
    }

    .warning text {
      font-size: 5px;
      font-weight: 500;
      fill: white;
      transform: rotateZ(-70deg);
      transform-origin: 50% 50%;
    }
  </style>

</head>

<body>
  <div class="wrapper">
    <div class="vinyl">
      <svg class="warning" width="450" height="450" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg">
        <path id="spiral" style="display:inline;fill:none;fill-rule:evenodd;stroke:none;stroke-width:.0750443"
          d="M42.56 11.55c2.213 1.212 5.243 7.313 5.522 13.066.648 13.413-8.465 22.991-21.887 22.937C15.32 47.509 5.941 38.12 5.893 26.387 6.59 14.11 16.375 6.444 26.743 6.422c9.677-.02 16.072 7.939 16.418 18.383.375 11.326-7.027 18.057-17.144 18.019-8.46-.032-15.738-7.48-15.673-16.628.06-8.392 6.526-15.59 14.464-15.505 8.707.092 13.934 5.951 13.831 13.78-.113 8.678-4.97 13.737-12.805 13.473-5.96-.2-11.075-5.466-10.884-11.947.168-5.69 3.886-10.46 9.25-11.262 4.005-.598 8.664 1.744 8.932 6.845.318 6.044-3.382 11.582-7.49 11.253" />

        <text>
          <textPath href="#spiral">Something happened or the requested page not found. Please, reload, try the menu
            above the page or go back to the main page.
          </textPath>
        </text>
      </svg>
    </div>
  </div>
</body>

</html>

Проблема такая: в конце анимации со scale, когда диск долетает до своего постоянного места, текст, который следует по спирали svg, дёргается и корректируется визуально, что выглядит отвратительно. Советы с просторов Stack Overflow:

  • прописать точные размеры в svg - я заменил % на px,
  • добавить backface-visibility: hidden,
  • transform-style: preserve-3d

не помогают мне (( Интересно, что в Firefox такой проблемы нет, она есть только в Chrome и Edge (другими браузерами не располагаю, было бы интересно протестировать дальше). Если это баг хрома, может, есть какие-то обходные пути? Вопрос немного помогает решить замена ease-in-out в анимации flight на linear - текст почти незаметно дёргается, но хотелось бы решить эту проблему кардинально, а не костыльно. Может, кто-то сталкивался с таким

2

Спасибо что дал код для воспроизведения. Так куда проще разбираться в вопросе.

Я проверил код в сафари, хроме, фаерфоксе (все на маке) сам диск никуда не двигается, текст просто крутится. Никаких артифактов не заметил. Похоже что где-то при подготовке кода примера потерялась часть отвечающая за полет диска.

3

Странно, ну, “полёт” - он просто scale-ится с 0 до размеров, когда начинает вращаться. Вот как это выглядит, загрузил видео на файлообменник:
вот как это выглядит сейчас - тыц!
P.S. Прошу прощения за фоновую музыку - я не знал, что захват с экрана запишет и её ((

4

Но внезапно я уже нашёл решение: нужно просто дать “параллельную” анимацию scale самому .warning text! И scale нужно дать чуть меньше, чем 1: для меня сработало 0.98:

.warning text {
  ...............
  animation: transformTextInSvg 1.5s ease-in-out forwards;
}

@keyframes transformTextInSvg {
 to { transform: scale(0.98)  rotateZ(-70deg); }
}

Неожиданно… Работает и в Chrome, и в Firefox. Буду думать, что нашёл кросс-браузерное решение. Спасибо за оперативную реакцию и помощь )

1 лайк