Open In App

Semantic-UI Static Jiggle 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 are in general used to transform the web content in and out of the viewport. Static animations are not controlled by any user actions and we can predict them easily when they are animated from one state to another. 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 Jiggle which is a static animation along with the implementation.

Static Jiggle Animation: Static animations are in general used to draw the attention of users. Static Jiggle Animation draws the user’s attention to the shape of the element to be animated by jiggling the element.

Syntax:

$(....)
  .transition('jiggle')
;

Example: Let us now understand the implementation of static jiggle animation. As soon as we click the button, the function will be called and the image will undergo the jiggle animation.

HTML




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


Output:

Semantic-UI Static Jiggle Animation

Semantic-UI Static Jiggle Animation

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



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