CSS - Flash Effect

Quiz

Description

A sudden brief burst of bright light of an element.

Syntax

@keyframes flash {
   0%, 50%, 100% {
      opacity: 1;
   }
   25%, 75% {
      opacity: 0;
   }
}

Parameter

Opacity − Opacity applies to an element to make translucence.

Example

<html>

<head>
  <style>
    .flashAnimated {
      background-image: url(/html/images/test.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }


    @keyframes flash {

      0%,
      50%,
      100% {
        opacity: 1;
      }

      25%,
      75% {
        opacity: 0;
      }
    }

    .flash {
      animation-name: flash;
    }
  </style>
</head>

<body>

  <div id="flashAnimates" class="flashAnimated"></div>
  <button onclick="flashFun()">Click</button>

  <script>
    function flashFun() {
      document.getElementById("flashAnimates").classList.add('flash');
    }
  </script>
</body>

</html>

Output

It will produce the following result:

css_animation.htm

Print Page