Open In App

Semantic-UI Static Shake 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 normally used to transform the web content in and out of the viewport. Static animations are used to draw the user’s attention to position, visibility, etc and they are predetermined and predictable when they transform 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 Semantic UI Static shake animation and learn how to implement it with the help of example code.

Semantic UI Static Shake Animation: Static Shake Animation in Semantic UI draws the user’s attention to its position by shaking the element to be animated. 

Syntax :

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

Example 1:Once we click the button, the function will be called and we can observe the static shake animation.

HTML




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


Output :

Semantic-UI Static Shake Animation

Semantic-UI Static Shake Animation

Example 2:

HTML




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


Output:

Semantic-UI Static Shake Animation

Semantic-UI Static Shake Animation

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



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