CODEWITHSUNDEEP
javascriptjquery
Lucirie
Lucirie

Reputation: 13

How can I implement a "Flash in" animation?

Currently I have a div that has the class "hidden" (CSS, display: none). I want it to add the class "full-size" after a set amount of time with javascript. However, how can I implement a "flash in" function?

setTimeout(fade_out, 28000);

function fade_out() {
    $("#interval").fadeOut().empty();
}

window.setTimeout(function() {
    $("#main").fadeIn().addClass('full-size');
}, 28000);

Instead of "fadeIn()", is there something similar that gives a "White flash in" animation where it flashes you with a white color and then the white color fades out to reveal "#main"?

Sorry if this request is unreasonable, this will be my first time asking a question instead of using AI!! Figured that it might be a good opportunity :D

I tried searching on google but really couldn't find what I was searching for.

The best I got was a "repetitively flashing, blinking" animation:

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

Which, unluckily, it isn't what I was searching for :(

Upvotes: 1

Views: 106

Answers (2)

AmirABD
AmirABD

Reputation: 297

You can use CSS animation to this. Test the sample code. Hope it be helpful.

Change to flash once by editing CSS. animation:flasher 2s 1 linear; infinite --> 1

Change speed by editing CSS. animation:flasher 0.5s 1 linear; 2s --> 0.5s

function stopFlash() {
  document.getElementById("flasher0").style.animation = "none";
}

function startFlash() {
  document.getElementById("flasher0").style.animation = "flasher 2s infinite linear";
}
  @keyframes flasher {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
<div style="border:1px solid black;width:200px;height:200px;position:relative;">
  <div id="flasher0" style="animation:flasher 2s infinite linear;position:absolute;left:0;top:0;width:100%;height:100%;"></div>

  the main content. You can change to flash once by editing CSS. animation:flasher 2s 1 linear; infinite --> 1 You can change speed by editing CSS. animation:flasher 0.5s 1 linear; 2s --> 0.5s

</div>

<button onclick="startFlash();">click to start flasher.</button>
<button onclick="stopFlash();">click to stop flasher.</button>

Upvotes: 0

NVRM
NVRM

Reputation: 13154

If you really want to use JavaScript, use the Web Animation API, we don't even have to use classes. It's hard to be more concise than that.

elem.animate([{opacity:0},{opacity:1}],{duration:1000,iterations:Infinity})
<h1 id="elem">Fade-in Blink effect!</h1>

Upvotes: 0

Related Questions