Как остановить CSS ключевых кадров анимации мерцания при повторении - PullRequest
Новая
       5

Как остановить CSS ключевых кадров анимации мерцания при повторении

0 голосов
/ 20 апреля 2020

У меня есть следующий код, который использует три прозрачных изображения и перемещает их по экрану для имитации падения снега / звезды.

Моя проблема в том, что после того, как анимация идет в течение указанного времени (в данном случае 5 секунд), она мигает при повторном запуске анимации.

Как я могу исправить это, чтобы не мерцать, так что это одна непрерывная анимация? Смотрите пример здесь: https://repl.it/@shane8johnson / InbornGruesomeDatamart 

<!DOCTYPE html>
<html>
 <head>
  <style>
    .container{width:100%; height:100%; position:absolute;}
                .container{
                      background-color: black;
                      background-image: url('stars1.png'), url('stars2.png'), url('stars3.png');  
                      animation: snow 5s linear infinite;
                          }     
                 @keyframes snow {
                            0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
                            100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
                                 }
  </style>
 </head>
   <body>
     <div class="container"> </div>
        </body>

1 Ответ

0 голосов
/ 20 апреля 2020

Мерцание - результат того, что векторы движения вашей анимации не являются целым кратным фактических изображений. В результате к моменту окончания анимации (или зацикливания) stars1.png (например) будет перемещен на 500px вправо и на 1000px вниз - но фактические размеры изображения составляют 1100px x 600px. Поэтому, когда анимация достигает конца, она перемещается чуть меньше половины своей ширины и в полтора раза превышает ее высоту. В этот момент он переходит обратно к 0px, 0px.

Самый простой способ исправить это - убедиться, что ваши векторы движения несколько кратны размерам отдельных изображений. Например, попробуйте изменить это: 

100% {background-position: 500px 1000px, 400px 400px, 300px 300px}

на это: 

100% {background-position: 1100px 600px, -640px 512px, 2287px 1544px}

Вы также можете изменить время анимации на 10 секунд.

Все, что я делал, - это проверял, чтобы каждое ваше изображение перемещалось ровно на целое число, кратное их ширине и высоте, прежде чем анимация зацикливается. Таким образом, они именно там, где они были, когда началась анимация - и без мерцания.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...