MacFiss
@MacFiss
человек

Непредвиденное мерцание анимации, как решить?

Есть блок с тремя элементами, каждый элемент - анимация реализованная через кейфрейм.
Суть анимации: движение облаков и озона ;)

Кейфрейм очень прост, я на протяжении его цикла просто сменяю позицию бэкграунда от -1665px 0 до 0 0.
И проблема заключается в том, что анимация иногда начинает мерцать. И при том что повтор анимации происходит плавно! (поэтому этот вариант сразу откинул)

Видео с проблемой: https://yadi.sk/i/N2txuOGs33aTMg

Ребята пишут мол указывай для элемента backface-visibility hidden. Но не помогает блин!
Дубль проблемы: stackoverflow.com/questions/3461441/prevent-flicke...

Код:
.b-clouds
	z-index 10
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	&__item
		position absolute
		left 0
		right 0
		bottom 0
		z-index 3
		&--offset-1
			top 220px
			background url(../images/clouds.png) repeat-x 0 100%
			animation parallax_cloud 90s linear infinite
			opacity .8
		&--offset-2
			top 250px
			background url(../images/clouds.png) repeat-x 0 100%
			animation parallax_cloud 100s linear infinite reverse
			opacity .7
		&--offset-3
			z-index 1
			height 250px
			bottom 0
			background  url(../images/smoke.png) repeat-x 0 100%
			animation parallax_ozon 40s linear infinite

@keyframes parallax_cloud
	to
		background-position 1665px 0
	from
		background-position 0 0

@keyframes parallax_ozon
	to
		background-position 1634px 0
	from
		background-position 0 0
  • Вопрос задан
  • 671 просмотр
Пригласить эксперта
Ответы на вопрос 1
@devstudent
frontend-developer
у меня облака летали так
.cld {
 background-image:url(../images/clouds.png);
 width:100%;
 height:330px;
 position:fixed;
 background-repeat:repeat-x;
 background-position:0 0;
  animation: city 40s linear infinite;
    -webkit-animation: city 40s linear infinite;
  }
 
   
   @keyframes city {
    from { background-position: -1400px 0;}
    to { background-position:right top;}
   }
    @-webkit-keyframes city {
    from { background-position: -1400px 0;}
    to { background-position: left top;}
   }

не мерцали
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы