Плавающая анимация становится проще, когда я переключаю вкладку браузера и возвращаюсь обратно. ⇐ CSS

[Anonymous]

вот моя проблема:

Я создал плавную плавающую анимацию, которая перемещает контейнер по оси Y на 1% вверх, а затем бесконечно возвращается в исходное состояние.

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

НО, когда я перехожу на другую вкладку браузера, а затем возвращаюсь на вкладку веб-страницы, анимация воспроизводится легко и плавно. Я не знаю, что это может быть, есть предположения?

Вот моя CSS-анимация:

.test1 { анимация: наклон1 1,7 с, попеременно 3,5 с, бесконечное плавное перемещение; } @keyframestilt1 { от { трансформировать: транслироватьY(-20%); } к { трансформировать: транслироватьY(-19,5%); } } Исходное состояние компонента —translateY(-20%)

Для HTML-кода вы можете просто представить себе, что это квадратный элемент управления высотой 50 % экрана, в котором сосредоточен некоторый текст.

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