Semantic-UI Static Flash Animation

Last Updated : 20 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Animations allow us to transform web content in and out of the viewport. Semantic UI has many static animations like Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow. These animations are predictable and do not depend on the user interaction with the web. Static animations are used to draw the user’s attention. In this article, we will get to know about Semantic UI Static Flash Animation with the help of a code example.

Semantic UI Static Flash Animation: As already mentioned static animations help us draw the user’s attention. Static Flash Animation in Semantic UI is used to draw attention to itself by flashing.

Syntax:

$('.image').transition('flash');

Example 1: The element flashes as soon as we click the button in the following example thereby drawing attention to the image.

HTML

<html> 
<head> 
    <title>Semantic UI Flash animation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
     <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
             integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="ui container"> 
            <h2 class="ui header green">Geeksforgeeks</h2> 
            <strong>Static Flash Animation</strong> 
            <br><br> 
            <img class="ui image medium" 
                 src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220212134822/logo-200x200.jpg"/> 
            <br> 
              
            <button class="ui button"> 
                Static Flash Animation 
            </button> 
        </div> 
    </center>    
  
    <script> 
        $('button').click(function() { 
            $('.image').transition('flash'); 
        }) 
    </script> 
</body> 
</html> 

Output:

Semantic-UI Static Flash Animation

Example 2: The following code demonstrates the flash animation with mouse image hover event.

HTML

<html> 
<head> 
    <title>Semantic UI Flash animation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
     <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
             integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="ui container"> 
            <h2 class="ui header green">Geeksforgeeks</h2> 
            <strong>Static Flash Animation</strong> 
            <br><br> 
            <img class="ui image medium" 
                 src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3-200x200.png"/> 
            <br> 
        </div> 
    </center>    
  
    <script> 
        $('img').mouseover(function() { 
            $('.image').transition('flash'); 
        }) 
    </script> 
</body> 
</html> 