Как создать анимацию с редкостью, чтобы она появлялась вместе с анимациями, которые всегда появляются?
Пример здесь:
Число 1 имеет редкий шанс появиться, скажем, 40%. Когда он не появляется, он начинается с 2 , а затем после анимации 2 3 начинается.
Если это 1 используйте шанс, он появится и начнет двигаться вверх, и после завершения анимации будет воспроизводиться 2 , а затем через 2 - 3 . Таким образом, они просто смешиваются в качестве примера.
2 и 3 всегда будут появляться, но у 1 есть 40% для его появления,как пример. На 3 мне удалось добавить случайный фоновый шанс. Я прокомментировал этот код.
Если 1 не появится, то он должен действовать как display: none. Однако, когда я ставлю display: none на box1, анимация никогда не запускается или не запускается, но я ее не вижу, но помещаю в ключевые кадры.
Что яЯ думаю, мне нужен Javascript, чтобы он мог изменить свойство CSS animation-delay, хотя я не уверен.
Это то, что у меня есть: https://jsfiddle.net/edy3xjvz/2/
var box1 = document.getElementById("box1"); /* The one with the rarity */
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3"); /* Maybe give it a chance of which color */
var boxes = document.getElementById("boxes");
var box3Colors = {"blue": 90, "red": 50}; /* Blue has 90% chance and red has 50% not sure if done right, but what if I want to add a "green" with the chance of 90% too like "blue"??? */
/* Probably has to be done here, or when reaching a certain area, maybe with a button */
/*document.onload*/
var btn = document.getElementById("btn");
btn.addEventListener("click", startAnimation);
boxes.style.display = "none";
function randomizerWithChances(input) {
var array = [];
for(var item in input) {
if ( input.hasOwnProperty(item) ) {
for( var i=0; i<input[item]; i++ ) {
array.push(item);
}
}
}
return array[Math.floor(Math.random() * array.length)];
}
/* Start Animation */
function startAnimation() {
boxes.style.display = "none"; /* to replay but doesn't work*/
/* Do radomize stuff */
/* Don't really know for box1 */
/* I've tried box3, like that before
var random2 = box3Colors[Math.floor(Math.random() * box3Colors.length)]
box3.style.backgroundColor = random2;*/
box3.style.backgroundColor = randomizerWithChances(box3Colors);
/* Animation starts here */
boxes.style.display = "block";
}
#boxes {
}
.box {
display: inline-block;
position: relative;
height: 50px;
width: 50px;
margin-left: 20px;
}
#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}
@keyframes box1-up {
0% { top: 70px; position: relative; visibility: visible;}
100% {top: 0px; position: relative; visibility: visible;}
}
@keyframes blend {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box1 {
top: 70px;
/* display: none; Can't start with this I wanted that when it isn't there, it should not appear but with display: none it didn't work because it can never appear then */
/*position: absolute; visibility: hidden;*/ /* So had to use this but when using this
it didn't work the box is somehow upside
https://i.imgur.com/3vER5ja.png so not sure */
animation: box1-up 2s;
animation-fill-mode: forwards;
}
#box2 {
opacity: 0;
animation: blend 3s;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#box3 {
opacity: 0;
animation: blend 3s;
animation-fill-mode: forwards;
animation-delay: 5s;
}
<div id="boxes">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
<button id="btn" style="margin-top: 200px;">Start Animation</button>
Ниже должна быть кнопка. Я попробовал поставить рандомизатор для
box3 цвета фона, похоже, работает. Я пытался использовать
box1 , но
display: none сломал его.
Я пытался сделать что-то, что, когда анимация вообще не запускается, этот box2 как будто не здесь, но когда я использую display: none анимация никогда не запускается, не знаю почему. https://jsfiddle.net/edy3xjvz/3/
Затем я удалил его, так что это то, что вы видели на фрагменте выше. https://jsfiddle.net/edy3xjvz/4/