Подергивания в CSS анимации

515
17 января 2018, 14:58

Почему анимация дергается (вверх поднимается рывками)?

header.paralax { 
    height: 520px; 
} 
 
header { 
    position: relative; 
    width: 100%; 
    display: inline-block; 
    vertical-align: top; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 
@-webkit-keyframes sky_background { 
	0% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png);); 
		color: #007fd5 
	} 
	100% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png);); 
		color: #007fd5 
	} 
} 
.sky { 
    height: 100%;    
    background-size: cover; 
    background-repeat: no-repeat; 
    position: relative; 
    width: 100%; 
    float: left; 
    z-index: 1; 
    overflow: hidden; 
    -webkit-animation: sky_background 50s ease-out infinite; 
    -moz-animation: sky_background 50s ease-out infinite; 
    -o-animation: sky_background 50s ease-out infinite; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
} 
 
.moon { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_one.png"); 
	position: absolute; 
	background-size: 7%; 
	left: 0; 
	top: 0; 
	height: 1000%; 
	width: 100%; 
	-webkit-animation: moon 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-moz-animation: moon 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-o-animation: moon 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
 
    animation-direction: normal; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1) 
} 
 
.clouds_one { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_one.png"); 
	position: absolute; 
	background-size: 8%; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 300%; 
	-webkit-animation: cloud_one 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-moz-animation: cloud_one 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-o-animation: cloud_one 70s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
    animation-direction: normal; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1) 
} 
 
.clouds_two { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_two.png"); 
	position: absolute; 
	left: 0; 
	background-size: 12%; 
	top: 0; 
	height: 100%; 
	width: 300%; 
	-webkit-animation: cloud_two 75s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-moz-animation: cloud_two 75s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-o-animation: cloud_two 75s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
    animation-direction: normal; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1) 
} 
 
.clouds_three { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_three.png"); 
	position: absolute; 
	left: 0; 
	background-size: 9%; 
	top: 0; 
	height: 100%; 
	width: 300%; 
 
	-webkit-animation: cloud_three 100s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-moz-animation: cloud_three 100s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-o-animation: cloud_three 100s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
    animation-direction: normal; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1) 
} 
 
 
@-webkit-keyframes moon { 
0% { 
    top: 50%; 
} 
100% { 
    top: -100%; 
} 
 
} 
@-webkit-keyframes cloud_one { 
0% { 
    top: 50%; 
} 
100% { 
    top: -100%; 
} 
} 
 
@-webkit-keyframes cloud_two { 
 	0% { 
    top: 50%; 
} 
100% { 
    top: -100%; 
} 
} 
 
@-webkit-keyframes cloud_three { 
 0% { 
    top: 50%; 
} 
100% { 
    top: -100%; 
} 
}
  <header class="paralax"> 
  <div class="sky" style="http://extremje.beget.tech/assets/img/index/top.png);"> 
      <div class="moon"></div> 
      <div class="clouds_one"></div> 
      <div class="clouds_two"></div> 
      <div class="clouds_three"></div> 
  </div> 
  
</header>

получилось, а как зациклить такую анимацию и уменьшить скорость?

header.paralax { 
    height: 520px; 
    transform: translateZ(0); 
} 
 
header { 
    position: relative; 
    width: 100%; 
    display: inline-block; 
    vertical-align: top; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 
@-webkit-keyframes sky_background { 
	0% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png);); 
		color: #007fd5 
	} 
	100% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png);); 
		color: #007fd5 
	} 
} 
.sky { 
    height: 100%;    
    background-size: cover; 
    background-repeat: no-repeat; 
    position: relative; 
    width: 100%; 
    float: left; 
    z-index: 1; 
    overflow: hidden; 
    -webkit-animation: sky_background 350s ease-out infinite; 
    -moz-animation: sky_background 350s ease-out infinite; 
    -o-animation: sky_background 350s ease-out infinite; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    transform: translateZ(0); 
} 
 
.moon { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_one.png"); 
	position: absolute; 
	background-size: 65%; 
	left: 0; 
	top: 0; 
	height: 1000%; 
	width: 100%; 
-webkit-animation: cloud_three 1600s linear infinite; 
	-moz-animation: cloud_three 1600s linear infinite; 
	-o-animation: cloud_three 1600s linear infinite; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
 
} 
 
.clouds_one { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_one.png"); 
	position: absolute; 
	background-size:54%; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 300%; 
-webkit-animation: cloud_three 300s linear infinite; 
	-moz-animation: cloud_three 300s linear infinite; 
	-o-animation: cloud_three 300s linear infinite; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
} 
 
.clouds_two { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_two.png"); 
	position: absolute; 
	left: 0; 
	background-size: 40%; 
	top: 0; 
	height: 100%; 
	width: 300%; 
-webkit-animation: cloud_three 300s linear infinite; 
	-moz-animation: cloud_three 300s linear infinite; 
	-o-animation: cloud_three 300s linear infinite; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
} 
 
.clouds_three { 
	background: url("http://extremje.beget.tech/assets/img/oblako/cloud_three.png"); 
	position: absolute; 
	left: 0; 
	background-size: 76%; 
	top: 0; 
	height: 100%; 
	width: 300%; 
 
-webkit-animation: cloud_three 300s linear infinite; 
	-moz-animation: cloud_three 300s linear infinite; 
	-o-animation: cloud_three 300s linear infinite; 
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-transform: translate3d(0, 0, 0); 
	-o-transform: translate3d(0, 0, 0); 
    animation-direction: normal; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1) 
} 
 
@-webkit-keyframes sky_background { 
	0% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png); 
		color: #007fd5 
	} 
	100% { 
		background: url(http://extremje.beget.tech/assets/img/index/top.png); 
		color: #007fd5 
	} 
} 
@-webkit-keyframes moon { 
	0%{ 
		transform: translate(0, 0); 
	} 
	100% { 
		transform: translate(0,-1000%); 
	} 
} 
@-webkit-keyframes cloud_one { 
	/*0% { 
		left: 0 
	} 
	100% { 
		left: -200% 
	}*/ 
	0%{ 
		transform: translate(0, 0); 
	} 
	100% { 
		transform: translate(0,-1000%); 
	} 
} 
 
@-webkit-keyframes cloud_two { 
	0%{ 
		transform: translate(0, 0); 
	} 
	100% { 
		transform: translate(0,-1000%); 
	} 
} 
 
@-webkit-keyframes cloud_three { 
	0%{ 
		transform: translate(0, 0); 
	} 
	100% { 
		transform: translate(0,-1000%); 
	} 
}
  <header class="paralax"> 
  <div class="sky" style="http://extremje.beget.tech/assets/img/index/top.png);"> 
      <div class="moon"></div> 
      <div class="clouds_one"></div> 
      <div class="clouds_two"></div> 
      <div class="clouds_three"></div> 
  </div> 
  
</header>

READ ALSO
Внешний ключ по двум полям

Внешний ключ по двум полям

Есть три таблицы

365
Структура таблиц в БД для журнала оценок

Структура таблиц в БД для журнала оценок

Есть таблица с студентамиУ каждого студента есть определенный маркер(оценка) для данного предмета в каком-то дне недели

290
Как Entity Framework реализует Identity Map?

Как Entity Framework реализует Identity Map?

Предположим я отправляю запрос к базе данных и получаю 1000 объектов, если я отправлю этот запрос еще раз используя тот же объект DbContext, то я получу...

361
Mocking Linq2db DataConnection

Mocking Linq2db DataConnection

Доброго времени суток!

685