CODEWITHSUNDEEP
javascripthtmlcssanimation
juwi
juwi

Reputation: 98

How to flash the background of a website?

I am trying to create a function that flashes the website every time you call it.

My approach was like this:

function flashRed() {
  document.body.style.animation = "redflash 0.06s 2 alternate ease-out";
}

function flashGreen() {
  document.body.style.animation = "greenflash 0.06s 2 alternate ease-out"
}
@keyframes redflash {
  to {
    background-color: #FFCDD2;
  }
}
@keyframes greenflash {
  to {
    background-color: #C8E6C9;
  }
}
<input type="button" value="RED" onclick="flashRed()">
<input type="button" value="GREEN" onclick="flashGreen()">

But this way I can only make it flash it once, as the animation attribute is set the first time or changes.

How can I change my code, or use a different approach to make it flash as often as i want?

Upvotes: 1

Views: 875

Answers (4)

ABGR
ABGR

Reputation: 5235

You need to clear .animation once each function gets executed. Having said that, also, by clearing them you would not be able to see the effect so you'll have to use setTimeOut

 function flashRed() {
    setTimeout(function(){  document.body.style.animation = "redflash 0.06s 2 alternate ease-out"; }, 100);

      document.body.style.animation="";
    }

function flashGreen() {
setTimeout(function(){  document.body.style.animation = "greenflash 0.06s 2 alternate ease-out" }, 100);
  document.body.style.animation = "";
}

https://jsfiddle.net/7t1m517t/1/

Upvotes: 2

Brett DeWoody
Brett DeWoody

Reputation: 62871

As you said, the animation can only be run once because the animation property has been set. To allow for the same animation to be run multiple times in a row you can clear the animation property after the animation has completed.

There are a few ways to do this, one simple way is with a window.setTimeout function.

function flashRed() {
  document.body.style.animation = "redflash 0.6s 2 alternate ease-out";
  window.setTimeout(function(){
    document.body.style.animation = "";
  }, 0600);
}

function flashGreen() {
  document.body.style.animation = "greenflash 0.6s 2 alternate ease-out";
  window.setTimeout(function(){
    document.body.style.animation = "";
  }, 0600);
}
@keyframes redflash {
  to {
    background-color: #FFCDD2;
  }
}
@keyframes greenflash {
  to {
    background-color: #C8E6C9;
  }
}
<input type="button" value="RED" onclick="flashRed()">
<input type="button" value="GREEN" onclick="flashGreen()">

Upvotes: 0

Hanna
Hanna

Reputation: 10771

Instead of using keyframe animations, simply add/remove the classes with timeouts.

Here's a function where you can pass in the class, and the number of times you want to flash:

https://jsfiddle.net/1vzzaqvw/2/

function flash(cssClass, flashNum, delay, total) {
    if(typeof total === 'undefined') total = 1;
  if(typeof delay === 'undefined') delay = 500;
  document.body.classList.add(cssClass);
  setTimeout(function(){
    document.body.classList.remove(cssClass);
    if(total < flashNum) {
        setTimeout(function(){
            flash(cssClass, flashNum, delay, ++total);
        },delay);
    }
  },delay);
}

Then you can call it, i.e flash('red', 3), which would flash the red class 3 times.

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

Add and remove the class with an timeout...

function flashRed() {
  document.body.classList.add('red')
  window.setTimeout(function() {
    document.body.classList.remove('red')
  }, 100)

}

function flashGreen() {
  document.body.classList.add('green')
  window.setTimeout(function() {
    document.body.classList.remove('green')
  }, 100)
}
@keyframes redflash {
  to {
    background-color: #FFCDD2;
  }
}
@keyframes greenflash {
  to {
    background-color: #C8E6C9;
  }
}
.red {
  animation: redflash 0.06s 2 alternate ease-out;
}
.green {
  animation: greenflash 0.06s 2 alternate ease-out;
}
<input type="button" value="RED" onclick="flashRed()" id="red">
<input type="button" value="GREEN" onclick="flashGreen()" id="green">

Upvotes: 3

Related Questions