Open In App

Semantic-UI Static Pulse 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.

Animations in Semantic UI are used to animate the web content in and out of the viewport. Static animations are used in Semantic UI to draw user’s attention to visibility, appearance, highlight an element, or give feedback. They do not depend on the user’s interaction with the web page and are predetermined. Semantic UI offers us many variations in static animations which include Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow. 

In this article, we will understand and learn about Semantic UI Static Pulse Animation along with the implementation and example code.

Semantic UI Static Pulse Animation: Semantic UI Static Pulse Animation is used to draw the user’s attention to visibility by pulsing the element to be animated. 

Syntax:

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

Example 1: We can observe pulsing in the element as soon as we click the button when the function is called.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI pulse animation</title>
    <link href=
        rel="stylesheet" />
        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 pulse Animation</strong>
            <br><br>
              
            <img class="ui image medium"
                src=
            <br>
  
            <button class="ui button">
                Static pulse Animation
            </button>
        </div>
    </center>
  
    <script>
        $('button').click(function () {
            $('.image').transition('pulse');
        })
    </script>
</body>
  
</html>


Output:

Semantic-UI Static Pulse Animation

Semantic-UI Static Pulse Animation

Example 2: When the image hovers, the function will be called and we can observe the Semantic UI Static Pulse Animation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Pulse animation</title>
    <link href=
        rel="stylesheet" />
        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 Pulse Animation</strong>
            <br><br>
            <img class="ui image medium"
                src=
            <br>
        </div>
    </center>
  
    <script>
        $('img').mouseover(function () {
            $('.image').transition('pulse');
        })
    </script>
</body>
  
</html>


Output:

Semantic-UI Static Pulse Animation

Semantic-UI Static Pulse Animation

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



Last Updated : 20 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads