Я отправляю вам свое решение, пытаясь сделать всю анимацию очень простой для создания и понимания.
Как я уже говорил в моих комментариях, моя идея возникла из вопроса: " Хорошо, если некоторыеящиков иногда нет, почему я должен всегда ставить их все на сцену? Я ставлю на сцену, только если мне нужно переместить ее"
Итак, для моего решения все коробки созданы наfly with jquery, зацикливающий объект javascript, который я называю " boxes ":
var boxes={
"box1":{
percentual: 40, // 40% to appear on stage
animation: "box-up-down", // animation name
backgroundColor: "green" // background color
},
"box2":{
percentual: 100,
animation: "fade-in",
backgroundColor: "orange"
},
"box3":{
percentual: 100,
animation: "fade-in",
backgroundColor: "blue"
},
"box4":{
percentual: 20,
animation: "fade-in-out",
backgroundColor: "pink"
},
"box5":{
percentual: 100,
animation: "rotate-in-out",
backgroundColor: "red"
}
}
В этом объекте вы можете указать, сколько ящиков вы хотите (в моем примере их 5). Первое значение - вероятность появления на сцене (40% - первое, 100% - второе ...). Второй определяет название анимации, которую я написал в CSS:
/*ANIMATIONS*/
.fade-in {
animation: fade-in 1s ease forwards;
}
.fade-in-out {
animation: fade-in-out 7s ease forwards;
}
.box-up-down {
animation: box-up-down 7s ease forwards;
}
.rotate-in-out {
animation: rotate-in-out 7s ease forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in-out {
0% {
opacity: 0;
}
14% {
opacity: 1;
}
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes box-up-down {
0% {
top: 70px;
opacity: 0;
}
14% {
top: 0;
opacity: 1;
}
86% {
top: 0;
opacity: 1;
}
100% {
top: 70px;
opacity: 0;
}
}
@keyframes rotate-in-out {
0% {
transform: scale(0.5) rotate(0deg);
opacity: 0;
}
14% {
transform: scale(1) rotate(180deg);
opacity: 1;
}
86% {
transform: scale(1) rotate(180deg);
opacity: 1;
}
100% {
transform: scale(0.5) rotate(0deg);
opacity: 0;
}
}
Важно понимать, что в самой анимации установлена пауза. В моем примере я использовал 7 секунд анимации: 1 для появления, 5 для периода паузы и 1 для исчезновения. См. Это для получения дополнительной информации о технике: Исчезновение, пауза, затем исчезновение в элементе - CSS Only . Вы должны использовать пропорцию, чтобы найти точное процентное значение (в моем примере это было 14% и 86%).
Последний аргумент - это только цвет фона поля.
Для вычислениявероятность появления на сцене, я использовал простое сравнение между случайным числом и моим процентом, установленным в объекте javascript:
let random=Math.floor(Math.random() * 100) + 1; //random number from 1 to 100
if(value.percentual>=random){
//create my box
}
Это все сценарий в действии:
var boxes = {
"box1": {
percentual: 40, // 40% to appear on stage
animation: "box-up-down", // animation name
backgroundColor: "green" // background color
},
"box2": {
percentual: 100,
animation: "fade-in",
backgroundColor: "orange"
},
"box3": {
percentual: 100,
animation: "fade-in",
backgroundColor: "blue"
},
"box4": {
percentual: 20,
animation: "fade-in-out",
backgroundColor: "pink"
},
"box5": {
percentual: 100,
animation: "rotate-in-out",
backgroundColor: "red"
}
}
$("#btn").on("click", function(e) {
// set the init situation if I double click during the animations
let i = 0;
$("#boxes").html("");
// Create every block
$.each(boxes, function(index, value) {
let random = Math.floor(Math.random() * 100) + 1; //random number from 1 to 100
if (value.percentual >= random) {
let myBox = `<div id="${index}"
class="box ${value.animation}"
style="background-color:${value.backgroundColor};
animation-delay:${i}s;"
></div>`;
$(myBox).appendTo("#boxes");
i++;
}
});
});
.box {
display: inline-block;
position: relative;
transition: all 1s;
height: 50px;
width: 50px;
opacity:0;
background-color:#f2f2f2;
margin-right: 20px;
}
/*ANIMATIONS*/
.fade-in {
animation: fade-in 1s ease forwards;
}
.fade-in-out {
animation: fade-in-out 7s ease forwards;
}
.box-up-down {
animation: box-up-down 7s ease forwards;
}
.rotate-in-out {
animation: rotate-in-out 7s ease forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in-out {
0% {
opacity: 0;
}
14% {
opacity: 1;
}
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes box-up-down {
0% {
top: 70px;
opacity: 0;
}
14% {
top: 0;
opacity: 1;
}
86% {
top: 0;
opacity: 1;
}
100% {
top: 70px;
opacity: 0;
}
}
@keyframes rotate-in-out {
0% {
transform: scale(0.5) rotate(0deg);
opacity: 0;
}
14% {
transform: scale(1) rotate(180deg);
opacity: 1;
}
86% {
transform: scale(1) rotate(180deg);
opacity: 1;
}
100% {
transform: scale(0.5) rotate(0deg);
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxes"></div>
<button id="btn" style="margin-top: 200px;">Start Animation</button>