Ребята, милые, я опять к вам с запросом очень странного характера)
Хочу создать у себя эффект падающих звезд, проделываю все это через CSS Animation с использованием @keyframes.
Но вот в чем проблема. Я использую параметр animation-iteration-count: infinite, который, в свою очередь, не предполагает пауз между итерациями. А паузы критично нужны. Ведь звезды имеют свойство падать с неким разбросом во времени, как вы понимаете)
В чем, собственно, состоит загвоздка. div'ов звезд - предполагается много, хотя пока только три. И хотелось бы, чтобы они могли "активироваться" в рандомный промежуток времени каждый. Пока что у меня получилось то, что получилось. Существует ли возможность решить эту проблему через JS, заставив звезды, так скажем, падать периодически, в зависимости от воли рандома, по одной или несколько штук?)
Собственно, сам css-код:
Код:/* Starry night
-------------------------------------------------------------*/
#shine {
background: transparent url("http://storage2.static.itmages.ru/i/16/1119/h_1479578308_7861154_67806f071b.png") no-repeat scroll 0px 0px / 20% auto;
display: block;
position: absolute;
width: 34px;
height: 34px;
margin-left: -33px;
top: 69px;
opacity: 0.8;
filter: blur(0.8px);
animation: shineless linear 0.7s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: shineless linear 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: shineless linear 0.7s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: shineless linear 0.7s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: shineless linear 0.7s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
#shine1 {
background: transparent url("http://storage2.static.itmages.ru/i/16/1119/h_1479578308_7861154_67806f071b.png") no-repeat scroll 0 0 / 20% auto;
display: block;
filter: blur(0.8px);
height: 34px;
margin-left: -14px;
opacity: 0.8;
position: absolute;
top: 109px;
transform-origin: 50% 50% 0;
width: 34px;
-webkit-animation: shineless linear 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: shineless linear 0.7s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: shineless linear 0.7s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: shineless linear 0.7s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
#shine2 {
background: transparent url("http://storage2.static.itmages.ru/i/16/1119/h_1479578308_7861154_67806f071b.png") no-repeat scroll 0 0 / 20% auto;
display: block;
filter: blur(0.8px);
height: 34px;
margin-left: -50px;
opacity: 0.8;
position: absolute;
top: 109px;
transform-origin: 50% 50% 0;
width: 34px;
-webkit-animation: shineless linear 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: shineless linear 0.7s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: shineless linear 0.7s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: shineless linear 0.7s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
@keyframes shineless{
0% {
opacity: 1;
transform: translate(0px, 0px);
}
10% {
opacity: 0.9;
transform: translate(-30px, 30px);
}
20% {
opacity: 0.8;
transform: translate(-60px, 60px);
}
30% {
opacity: 0.7;
transform: translate(-90px, 90px);
}
40% {
opacity: 0.6;
transform: translate(-120px, 120px);
}
50% {
opacity: 0.45;
transform: translate(-150px, 150px);
}
60% {
opacity: 0.3;
transform: translate(-180px, 180px);
}
70% {
opacity: 0.1;
transform: translate(-210px, 210px);
}
100% {
opacity: 0;
transform: translate(-240px, 240px);
}
}
@-moz-keyframes shineless{
0% {
opacity: 1;
transform: translate(0px, 0px);
}
10% {
opacity: 0.9;
transform: translate(-30px, 30px);
}
20% {
opacity: 0.8;
transform: translate(-60px, 60px);
}
30% {
opacity: 0.7;
transform: translate(-90px, 90px);
}
40% {
opacity: 0.6;
transform: translate(-120px, 120px);
}
50% {
opacity: 0.45;
transform: translate(-150px, 150px);
}
60% {
opacity: 0.3;
transform: translate(-180px, 180px);
}
70% {
opacity: 0.1;
transform: translate(-210px, 210px);
}
100% {
opacity: 0;
transform: translate(-240px, 240px);
}
}
@-webkit-keyframes shineless {
0% {
opacity: 1;
transform: translate(0px, 0px);
}
10% {
opacity: 0.9;
transform: translate(-30px, 30px);
}
20% {
opacity: 0.8;
transform: translate(-60px, 60px);
}
30% {
opacity: 0.7;
transform: translate(-90px, 90px);
}
40% {
opacity: 0.6;
transform: translate(-120px, 120px);
}
50% {
opacity: 0.45;
transform: translate(-150px, 150px);
}
60% {
opacity: 0.3;
transform: translate(-180px, 180px);
}
70% {
opacity: 0.1;
transform: translate(-210px, 210px);
}
100% {
opacity: 0;
transform: translate(-240px, 240px);
}
}
@-o-keyframes shineless {
0% {
opacity: 1;
transform: translate(0px, 0px);
}
10% {
opacity: 0.9;
transform: translate(-30px, 30px);
}
20% {
opacity: 0.8;
transform: translate(-60px, 60px);
}
30% {
opacity: 0.7;
transform: translate(-90px, 90px);
}
40% {
opacity: 0.6;
transform: translate(-120px, 120px);
}
50% {
opacity: 0.45;
transform: translate(-150px, 150px);
}
60% {
opacity: 0.3;
transform: translate(-180px, 180px);
}
70% {
opacity: 0.1;
transform: translate(-210px, 210px);
}
100% {
opacity: 0;
transform: translate(-240px, 240px);
}
}
@-ms-keyframes shineless {
0% {
opacity: 1;
transform: translate(0px, 0px);
}
10% {
opacity: 0.9;
transform: translate(-30px, 30px);
}
20% {
opacity: 0.8;
transform: translate(-60px, 60px);
}
30% {
opacity: 0.7;
transform: translate(-90px, 90px);
}
40% {
opacity: 0.6;
transform: translate(-120px, 120px);
}
50% {
opacity: 0.45;
transform: translate(-150px, 150px);
}
60% {
opacity: 0.3;
transform: translate(-180px, 180px);
}
70% {
opacity: 0.1;
transform: translate(-210px, 210px);
}
100% {
opacity: 0;
transform: translate(-240px, 240px);
}
}
Отредактировано audaciousGodsend (Вс, 20 Ноя 2016 02:48:17)