У меня есть класс, примененный к 100+ дивам.
Давайте назовем класс .random-opacity, и он создаст анимацию непрозрачности от 0 до 1.
Я бы хотел применять или запускать анимацию этого класса в произвольные моменты времени, чтобы все 100+ дивов имели одинаковую анимацию, но все начинались с разных моментов.
Возможно ли это сделать только с CSS ? Он может быть полностью рандомизирован, а также дает задержку максимум на X секунд.
Вот код, который у меня есть:
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.6; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.6; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.6; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.6; }
100% { opacity:1; }
}
.random-opacity {
-webkit-animation: flickerAnimation 5s infinite;
-moz-animation: flickerAnimation 5s infinite;
-o-animation: flickerAnimation 5s infinite;
animation: flickerAnimation 5s infinite;
}
Спасибо:)