javascriptjquery

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 :(


Solution

  • 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>