Open In App

Semantic-UI Static Glow Animation

Improve
Improve
Like Article
Like
Save
Share
Report

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.

To transform the web content in and out of the viewport, we use animations. Static animations are predictable and predetermined and are used to grab the user’s attention by changing visibility, position, etc and in general, they are not controlled by the user’s actions. Semantic UI provides us with many variations in static animations which include Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow. 

In this article, we will learn about Semantic UI Static Glow animation along with its implementation using example codes.

Semantic UI Static Glow Animation: Semantic UI Static Glow Animation grabs the user’s attention and highlights the position of the element to be animated by glowing.

Syntax:  

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

Example 1: Whenever the button is clicked, the transition() function is called and the element glows.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Glow animation</title>
    <link href=
         rel="stylesheet" />
     <script src=
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
             crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h2 class="ui header green">Geeksforgeeks</h2>
            <strong>Static Glow Animation</strong>
            <br><br>
            <img class="ui image medium"
                 src=
            <br>
            <button class="ui button">
                Static Glow Animation
            </button>
        </div>
    </center>  
 
    <script>
        $('button').click(function() {
            $('.image').transition('glow');
        })
    </script>
</body>
</html>


Output:

Example 2: As soon as we hover over the image, the transition() function is called and the glow animation can be observed.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Glow animation</title>
    <link href=
         rel="stylesheet" />
     <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
         crossorigin="anonymous">
    </script>
    <script src=
    </script>
    <style>
        body{
            margin : 20px;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h2 class="ui header green">Geeksforgeeks</h2>
            <strong>Static Glow Animation</strong><br><br>
            <img class="ui image medium" src=
        </div>
    </center>  
 
    <script>
        $('img').mouseover(function() {
            $('.image').transition('glow');
        })
    </script>
</body>
</html>


Output:

Reference Link: https://semantic-ui.com/modules/transition.html#glow



Last Updated : 27 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads