hi I have a for loop that is counting from 1 till infinity and I would like to change a background of a div and colour of the 'p'every time number is updated. It works when I make loop once (means for a first change but it does not rum animation for a second time. (numbers keep updating)
<div class="section" id="box">
<p id="demo">23375</p>
</div>
my CSS
.section {
background-color: blue;
margin: 1rem;
}
.pargraph-active,
.colorTransition {
animation: colorTransition 2s ease-in-out;
}
#keyframes colorTransition {
0% {
background-color: blue;
50% {
color: white
background-color: red;
}
100% {
background-color: blue;
}
}
and JS
let box = document.querySelector('#box');
let demo = document.querySelector('#demo');
function runAnimation() {
box.classList.add('colorTransition');
demo.classList.add('pargraph-active');
console.log(`Animation started`);
}
function initialState() {
box.classList.remove('colorTransition');
demo.classList.remove('pargraph-active');
console.log(`Initial State`);
}
(function theLoop(i) {
setTimeout(
function() {
demo.innerHTML = i;
if (i++) {
theLoop(i);
}
runAnimation();
},
2000,
initialState()
);
})(1);
You have some error in #keyframe syntax, you are missing } and also ; after color.
I fixed it and it work now, but i suggest that you only use css instead .
something like this would do
animation: colorTransition 2s ease-in-out infinite;
let box = document.querySelector('#box');
let demo = document.querySelector('#demo');
function runAnimation() {
box.classList.add('colorTransition');
demo.classList.add('pargraph-active');
console.log(`Animation started`);
}
function initialState() {
box.classList.remove('colorTransition');
demo.classList.remove('pargraph-active');
console.log(`Initial State`);
}
(function theLoop(i) {
setTimeout(
function() {
demo.innerHTML = i;
if (i++) {
theLoop(i);
}
runAnimation();
},
2000,
initialState()
);
})(1);
.section {
margin: 1rem;
background-color: blue;
}
.pargraph-active,
.colorTransition {
animation: colorTransition 2s ease-in-out;
}
#keyframes colorTransition {
0% {
background-color: blue;
}
50% {
color: white;
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="section " id="box">
<p id="demo">23375</p>
</div>
Related
I got myself a simple script that creates a progressbar which runs for 180 seconds. After that time the progressbar sends the browser to another website. View / run the code below.
I added an onclick event to the progress bar for testing purposes.
What I want; I want to be able to pause, reset and set a new running-time value.
I tried using document.getElementById('progressbar1').style.animationPlayState = 'paused'; to pause the progressbar, but unfortunately nothing is happening.
Do you guys have any clue on how to pause the progressbar?
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
You are selecting the wrong element to stop the animation!
The animation is running on #progressbar1 .inner
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').getElementsByClassName('inner')[0].style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
How to create an animation with rarity of it to appear together with animations that always appear?
Example here:
The number 1 has a rare chance to appear, let's say 40% chance. When it doesn't appear, it will start with 2 then after the animation of 2 is done 3 will start.
Should it 1 make it through the chance, it will appear and move up and after its animation is done, 2 will play and then after 2, 3 will play. So they just blend in as example.
2 and 3 will always appear, but 1 has a 40% for it to appear, as example. On 3 I've managed to put a random background chance on it. I've commented it on the code.
Should 1 not appear, then it should act like display: none. When I put display: none however on box1, the animation never starts, or it started but I can't see it, but I put it in the keyframes.
What I'm thinking is that, I guess it requires Javascript so it can change the animation-delay CSS property, I'm not sure though.
This is what I have so far: 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>
Below there should be a button. What I've tried is to put a randomizer for box3 background color, seemed to work. I've tried to use box1 but display: none broke it.
I've tried to make something that when the animation doesn't start at all, that box2 is like not here, but when I use display: none the animation never starts not sure why.
https://jsfiddle.net/edy3xjvz/3/
Then I removed it so this is what you seen on the snippet above. https://jsfiddle.net/edy3xjvz/4/
Here's a quick PoC of how it could behave with our without box1 if I'm understanding your description correctly so that if the active class is there it will look as you have it, and if not then give the illusion equivalent of display: none, hope it helps, cheers.
const box1 = document.getElementById('box1');
toggleActive = () => {
let classes = box1.classList;
classes.contains('active') ? classes.remove('active') : classes.add('active');
}
.container {
display: inline-block;
outline: lightgray 1px dashed;
padding: 1rem;
margin: 1rem;
}
.container div {
display: inline-block;
height: 5rem;
width: 5rem;
background-color: lime;
opacity: 0;
animation: reveal 3s ease forwards;
}
.container div:nth-child(2) {
animation-delay: 1s;
}
.container div:nth-child(3) {
animation-delay: 2s;
}
.container div:not(:last-child) {
margin-right: 1rem;
}
#box1 {
height: 0;
width: 0;
margin: 0;
transform: translateY(6rem);
transition: transform 1s ease;
}
#box1.active {
height: 5rem;
width: 5rem;
margin-right: 1rem;
animation: revealUp 2s ease forwards;
}
#keyframes reveal {
to { opacity: 1 }
}
#keyframes revealUp {
to {
opacity: 1;
transform: translateY(0);
}
}
<div class="container">
<div id="box1" class="active"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<br/>
<button onclick="toggleActive()">Toggle First One</button>
I think the animation handling, as in how it should be randomized and then what happens with the other animations, has to be kinda done manually but you can save the values or get them.
But that what I made is basically a basic concept and you can do even more stuff, but you have to adjust the delays and all that stuff.
This is the first concept:
https://jsfiddle.net/8z9obyLh/
Also you have to notice that once display is gone that the delay will start from there depending on which element just got out of display none.
The other one has a bit complex way but just look at it and how it's done.
Tbh, there should be another way to do this, which I think there is.
https://jsfiddle.net/d25kx6cj/5/
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};
var btn = document.getElementById("btn");
btn.addEventListener("click", toggleAnimation);
boxes.classList.add("deactivated");
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);
}
}
}
/*console.log(array)
var randomizerValue = Math.floor(Math.random() * array.length);
console.log(randomizerValue)*/
return array[Math.floor(Math.random() * array.length)];
}
function propertyFromStylesheet(selector, attribute) {
var value;
[].some.call(document.styleSheets, function (sheet) {
return [].some.call(sheet.rules, function (rule) {
if (selector === rule.selectorText) {
return [].some.call(rule.style, function (style) {
if (attribute === style) {
value = rule.style.getPropertyValue(attribute);
return true;
}
return false;
});
}
return false;
});
});
return value;
}
var box1_defaultDurs = propertyFromStylesheet("#box1", "animation-duration");
var box2_defaultDur = parseFloat(propertyFromStylesheet("#box2", "animation-duration"));
var box4_defaultDur = parseFloat(propertyFromStylesheet("#box4", "animation-duration"));
var box3_defaultDurs = propertyFromStylesheet("#box3", "animation-duration");
var box1AppearChance = {no:6, yes:4} /* 40% Appear chance I guess*/
var box4AppearChance = {no:8, yes:2}
/*
defaultDurs.split(",").map(function(item) {
return item.trim();
});*/
var box1_defaultDur = box1_defaultDurs.split(",").map(function(item) {
return item.trim();
});
var box3_defaultDur = box3_defaultDurs.split(",").map(function(item) {
return item.trim();
});
var box1_defaultDurStart = parseFloat(box1_defaultDur[0]);
var box1_defaultDurEnd = parseFloat(box1_defaultDur[1]);
var box3_defaultDurStart = parseFloat(box3_defaultDur[0]);
var box3_defaultDurEnd = parseFloat(box3_defaultDur[1]);
var box3_delays = [];
function animationHandler() {
box3.style.backgroundColor = randomizerWithChances(box3Colors);
var box1Value = randomizerWithChances(box1AppearChance);
var box4Value = randomizerWithChances(box4AppearChance);
/*console.log(box1Value)*/
box3_delays[0] = "0s"; /* Put first delay value */
if (box1Value == "yes") {
box1.classList.add("active");
box2.style.animationDelay = box1_defaultDurStart + "s";
box3_delays[0] = box1_defaultDurStart + "s";
}
if (box1Value == "yes" || box4Value == "yes") {
box3_delays[0] = parseFloat(box3_delays[0]) + box2_defaultDur + "s";
}
/*box3.style.animationDelay = box3_defaultDurs.split(",").map(function(item) {
var itemTrimmed = item.trim();
return parseFloat(itemTrimmed) + box1_defaultDurStart + box2_defaultDur + "s";
});
}*/
/* Use this incase you have to summarize something with two delays, if it has 0s you might want to do something else or check if it's the first one in the array just to leave it alone. But in this case I didn't needed it */
/* box4.style.animationDelay = "0s"; To prevent NaN
Don't do this it it just breaks it just check it
*/
if (box4Value == "yes") {
box4.classList.add("active");
if ( isNaN(parseFloat(box2.style.animationDelay)) ) {
box4.style.animationDelay = box2_defaultDur + "s";
}
else if ( !isNaN(parseFloat(box2.style.animationDelay)) ) {
box4.style.animationDelay = parseFloat(box2.style.animationDelay) + box2_defaultDur + "s";
} /* box4 doesn't have a delay and we set one */
box3_delays[0] = parseFloat(box3_delays[0]) + box4_defaultDur + "s";
/* Delay of box3 is getting extended because of box4 when it appears */
}
if (box1Value == "yes" || box4Value == "yes") {
box3.style.animationDelay = [ parseFloat(box3_delays[0]) + "s", parseFloat(box3_delays[0]) + parseFloat(box3_defaultDurStart) + "s" ];
}
if (box1Value == "yes") {
if (box4Value == "no") {
box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + box1_defaultDurStart + box3_defaultDurEnd + "s"]
}
else {
box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + parseFloat(box4.style.animationDelay) + box1_defaultDurStart + box3_defaultDurEnd + "s"];
}
/* The + 2 is because of the box1_defaultDurStart which is needed */
/* And box3_defaultDurEnd also needed in this case */
}
}
function animationHandlerReset() {
box1.classList.remove("active");
box4.classList.remove("active"); /* And don't forget to remove the class at the end*/
/* Reset to default to stylesheet */
box1.style.removeProperty("animation-delay");
box2.style.removeProperty("animation-delay");
box3.removeAttribute("style"); /* or you could do this if you didn't give it any inline style by default */
box4.style.removeProperty("animation-delay");
}
function toggleAnimation() {
if (!boxes.classList.contains("deactivated")) {
animationHandlerReset();
boxes.classList.add("deactivated");
btn.innerHTML = "Start Animation";
}
else if (boxes.classList.contains("deactivated")) {
animationHandler();
boxes.classList.remove("deactivated");
btn.innerHTML = "Stop Animation"
}
}
#boxes {
}
.active {
display: inline-block!important;
}
.deactivated {
display: none!important;
/*visibility: hidden!important;*/
}
.box {
display: inline-block;
position: relative;
height: 50px;
width: 50px;
margin-left: 20px;
}
#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}
#box4 {background: orange;}
#keyframes box1-up {
0% { top: 70px;}
100% {top: 0px;}
}
#keyframes box1-down {
0% { top: 0px;}
100% {top: 70px; opacity: 0;}
}
#keyframes box4-anim {
0% { height: 50px; width: 50px; transform: scale(0.5) rotate(0deg); }
100% { height: 50px; width: 50px; transform: scale(1) rotate(180deg); }
}
#keyframes blend {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box1 {
top: 70px;
display: none;
animation: box1-up 2s, box1-down 3s;
animation-fill-mode: forwards;
}
#box2 {
opacity: 0;
animation: blend 3s;
animation-fill-mode: forwards;
/*animation-delay: 3s;*/
}
#box3 {
opacity: 0;
animation: blend 3s, blend 4s reverse;
animation-fill-mode: forwards;
animation-delay: 3s, 6s; /* Both delays start together. Probably you want the other delay to be the twice as the size of the first one in this case for the end, but maybe not everytime */
}
#box4 {
display: none;
height: 0px;
width: 0px;
animation: box4-anim 1s;
animation-fill-mode: forwards;
}
<div id="boxes">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box4" class="box"></div>
<div id="box3" class="box"></div>
</div>
<button id="btn" style="margin-top: 200px;">Start Animation</button>
In this question there is an accepted answer How to create an animation with rarity of it to appear together with animations that always appear?
It contains this
https://jsfiddle.net/d25kx6cj/5/
<div id="boxes">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box4" class="box"></div>
<div id="box3" class="box"></div>
</div>
But it looks that it's too complicated. Is there another way.
The thing is that it can become more complicated.
I'm trying to achieve this in an easier way:
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};
var btn = document.getElementById("btn");
btn.addEventListener("click", toggleAnimation);
boxes.classList.add("deactivated");
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);
}
}
}
/*console.log(array)
var randomizerValue = Math.floor(Math.random() * array.length);
console.log(randomizerValue)*/
return array[Math.floor(Math.random() * array.length)];
}
function propertyFromStylesheet(selector, attribute) {
var value;
[].some.call(document.styleSheets, function (sheet) {
return [].some.call(sheet.rules, function (rule) {
if (selector === rule.selectorText) {
return [].some.call(rule.style, function (style) {
if (attribute === style) {
value = rule.style.getPropertyValue(attribute);
return true;
}
return false;
});
}
return false;
});
});
return value;
}
var box1_defaultDurs = propertyFromStylesheet("#box1", "animation-duration");
var box2_defaultDur = parseFloat(propertyFromStylesheet("#box2", "animation-duration"));
var box4_defaultDur = parseFloat(propertyFromStylesheet("#box4", "animation-duration"));
var box3_defaultDurs = propertyFromStylesheet("#box3", "animation-duration");
var box1AppearChance = {no:6, yes:4} /* 40% Appear chance I guess*/
var box4AppearChance = {no:8, yes:2}
/*
defaultDurs.split(",").map(function(item) {
return item.trim();
});*/
var box1_defaultDur = box1_defaultDurs.split(",").map(function(item) {
return item.trim();
});
var box3_defaultDur = box3_defaultDurs.split(",").map(function(item) {
return item.trim();
});
var box1_defaultDurStart = parseFloat(box1_defaultDur[0]);
var box1_defaultDurEnd = parseFloat(box1_defaultDur[1]);
var box3_defaultDurStart = parseFloat(box3_defaultDur[0]);
var box3_defaultDurEnd = parseFloat(box3_defaultDur[1]);
var box3_delays = [];
function animationHandler() {
box3.style.backgroundColor = randomizerWithChances(box3Colors);
var box1Value = randomizerWithChances(box1AppearChance);
var box4Value = randomizerWithChances(box4AppearChance);
/*console.log(box1Value)*/
box3_delays[0] = "0s"; /* Put first delay value */
if (box1Value == "yes") {
box1.classList.add("active");
box2.style.animationDelay = box1_defaultDurStart + "s";
box3_delays[0] = box1_defaultDurStart + "s";
}
if (box1Value == "yes" || box4Value == "yes") {
box3_delays[0] = parseFloat(box3_delays[0]) + box2_defaultDur + "s";
}
/*box3.style.animationDelay = box3_defaultDurs.split(",").map(function(item) {
var itemTrimmed = item.trim();
return parseFloat(itemTrimmed) + box1_defaultDurStart + box2_defaultDur + "s";
});
}*/
/* Use this incase you have to summarize something with two delays, if it has 0s you might want to do something else or check if it's the first one in the array just to leave it alone. But in this case I didn't needed it */
/* box4.style.animationDelay = "0s"; To prevent NaN
Don't do this it it just breaks it just check it
*/
if (box4Value == "yes") {
box4.classList.add("active");
if ( isNaN(parseFloat(box2.style.animationDelay)) ) {
box4.style.animationDelay = box2_defaultDur + "s";
}
else if ( !isNaN(parseFloat(box2.style.animationDelay)) ) {
box4.style.animationDelay = parseFloat(box2.style.animationDelay) + box2_defaultDur + "s";
} /* box4 doesn't have a delay and we set one */
box3_delays[0] = parseFloat(box3_delays[0]) + box4_defaultDur + "s";
/* Delay of box3 is getting extended because of box4 when it appears */
}
if (box1Value == "yes" || box4Value == "yes") {
box3.style.animationDelay = [ parseFloat(box3_delays[0]) + "s", parseFloat(box3_delays[0]) + parseFloat(box3_defaultDurStart) + "s" ];
}
if (box1Value == "yes") {
if (box4Value == "no") {
box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + box1_defaultDurStart + box3_defaultDurEnd + "s"]
}
else {
box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + parseFloat(box4.style.animationDelay) + box1_defaultDurStart + box3_defaultDurEnd + "s"];
}
/* The + 2 is because of the box1_defaultDurStart which is needed */
/* And box3_defaultDurEnd also needed in this case */
}
}
function animationHandlerReset() {
box1.classList.remove("active");
box4.classList.remove("active"); /* And don't forget to remove the class at the end*/
/* Reset to default to stylesheet */
box1.style.removeProperty("animation-delay");
box2.style.removeProperty("animation-delay");
box3.removeAttribute("style"); /* or you could do this if you didn't give it any inline style by default */
box4.style.removeProperty("animation-delay");
}
function toggleAnimation() {
if (!boxes.classList.contains("deactivated")) {
animationHandlerReset();
boxes.classList.add("deactivated");
btn.innerHTML = "Start Animation";
}
else if (boxes.classList.contains("deactivated")) {
animationHandler();
boxes.classList.remove("deactivated");
btn.innerHTML = "Stop Animation"
}
}
#boxes {
}
.active {
display: inline-block!important;
}
.deactivated {
display: none!important;
/*visibility: hidden!important;*/
}
.box {
display: inline-block;
position: relative;
height: 50px;
width: 50px;
margin-left: 20px;
}
#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}
#box4 {background: orange;}
#keyframes box1-up {
0% { top: 70px;}
100% {top: 0px;}
}
#keyframes box1-down {
0% { top: 0px;}
100% {top: 70px; opacity: 0;}
}
#keyframes box4-anim {
0% { height: 50px; width: 50px; transform: scale(0.5) rotate(0deg); }
100% { height: 50px; width: 50px; transform: scale(1) rotate(180deg); }
}
#keyframes blend {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box1 {
top: 70px;
display: none;
animation: box1-up 2s, box1-down 3s;
animation-fill-mode: forwards;
}
#box2 {
opacity: 0;
animation: blend 3s;
animation-fill-mode: forwards;
/*animation-delay: 3s;*/
}
#box3 {
opacity: 0;
animation: blend 3s, blend 4s reverse;
animation-fill-mode: forwards;
animation-delay: 3s, 6s; /* Both delays start together. Probably you want the other delay to be the twice as the size of the first one in this case for the end, but maybe not everytime */
}
#box4 {
display: none;
height: 0px;
width: 0px;
animation: box4-anim 1s;
animation-fill-mode: forwards;
}
<div id="boxes">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box4" class="box"></div>
<div id="box3" class="box"></div>
</div>
<button id="btn" style="margin-top: 200px;">Start Animation</button>
A simplified version of this?
Basically it is animations but it has a random chance that one of them appears. So box1 has a random chance that it appears and box4 which is the orange one, just has been called like that. Has a random chance to appear.
And box1 and box3 have a start and end animation. And that has all to be calculated and then used and I was wondering if there is an easier way to do it, because that's just so much and not sure.
I think jQuery but I don't know any good example to this.
I post you my solution trying to make whole animation very very easy to create and to understand.
As I said in my comments, my idea came from a question: "Ok, if some boxes sometimes there aren't, why should I always put them all on the stage? I put on stage only if I have to move it"
So, for my solution all the boxes are create on fly with jquery, looping a javascript object that I call "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"
}
}
In this object you can put how many box you want (in my example they are 5). The first value is the probability of appearance on the stage (40% the first, 100% the second...). The second one define the name of animations that I wrote in 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;
}
}
It is important to understand that the pause is set in the animation itself. In my example I used 7seconds of animation: 1 for appear, 5 of pause period and 1 for disappear. See this for more information about the technique: Fade out, pause, then fade in an element - CSS Only. You have to use a proportion to find the exact percentual (in my example it was 14% and 86%).
Last arg is only the background color of the box.
To calculate the probability of appearance on the stage, I used a simple comparison between a random number and my percentage set in the javascript object:
let random=Math.floor(Math.random() * 100) + 1; //random number from 1 to 100
if(value.percentual>=random){
//create my box
}
This is all the script in action:
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>
I want to have the following JavaScript function to transition function between from have none display to block when generate_loading_screen() is called to to when it finishes transition between display block to none. How do I do this?
function generate_loading_screen() {
window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(generate_loading_screen);
};
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loading" id="loading_screen" style="display: none;"></div>
Just extra info: progress_percent is a variable that determines how much of the rest of the web-app has loaded. The grayscale filter does not affect the whole page, just the ID body_of
Thanks in advance
Probably better to use a opacity transition by adding a class when your percent reaches 100.
Codepen for working example or see below.
HTML:
<div class="loading" id="loading_screen"></div>
CSS:
.loading {
position: fixed;
border: 16px solid #dbdbdb;
border-radius: 50%;
border-top: 16px solid #53f442;
margin-left: 44%;
margin-top: 10%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
opacity: 100%;
transition: opacity 1s ease-in-out;
}
.done_loading {
opacity: 0;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Javascript:
var progress_percent = 25;
var interval;
function generate_loading_screen() {
interval = window.setInterval(function(){
progress_percent += 1; //totest
if (progress_percent > 75) {
document.getElementById("loading_screen").className = "loading done_loading";
//stop_generating_loading();
}
//TESTING
if(progress_percent > 100){
console.log("Reached 100%");
document.getElementById("loading_screen").className = 'loading';
progress_percent = 0;
}
//
}, 50);
};
function stop_generating_loading() {
clearInterval(interval);
};
document.addEventListener('DOMContentLoaded', function(){
generate_loading_screen();
});
Remove all the testing code to get this to work once, you might need to add additional code for your body div. Let me know if you need me to add more to this example!
window.setInterval returns an intervalId which you need to cancel in order to stop the interval
let timer;
function generate_loading_screen() {
timer = window.setInterval(function(){
if (progress_percent < 75) {
document.getElementById("loading_screen").style.display = "block";
document.getElementById("body_of").style.filter = "grayscale(1)";
}
else {
document.getElementById("loading_screen").style.display = "none";
document.getElementById("body_of").style.filter = "none";
stop_generating_loading();
}
}, 50);
};
function stop_generating_loading() {
clearInterval(timer);
};
i want to make my animation runs every 5sec using js
this is my html code
<div id="aa"></div>
and this is my css code
#aa{
width: 167px;
height: 169px;
background-image: url("sprite.png");
/*animation: play .2s steps(6) ;*/
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1002px; }
}
jsfiddle
You can play animation in class, then add and remove class of element every 5 second.
setInterval(function(){
$("div").addClass("play");
setTimeout(function(){
$("div").removeClass("play");
}, 1000);
}, 5000);
div {
width: 100px;
height: 100px;
background: green;
}
.play {
animation: play 1s;
}
#keyframes play {
0% { margin-left: 0px; }
50% { margin-left: 200px; }
100% { margin-left: 0px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
It will look like:
function animation()
{
$('#overlay').fadeIn('slow').delay(1000).fadeOut('slow');
}
setInterval(animation,5000);
I made a sample for you, have a look: http://jsfiddle.net/xgnjy8st/
Does this suite you?
<div id="aa"></div>
#aa {
width: 167px;
height: 169px;
background-image: url("http://www.w3schools.com/cssref/pineapple.jpg");
animation: blinker 5s forwards infinite;
}
#keyframes blinker {
50% {
opacity: 0.0;
}
}
https://jsfiddle.net/65t0ye2m/
Or try this one out with js
var img = document.getElementById('aa');
var interval = window.setInterval(function() {
if (img.style.visibility == 'visible') {
img.style.visibility = 'hidden';
} else {
img.style.visibility = 'visible';
}
}, 1000);
https://jsfiddle.net/65t0ye2m/