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

If we wish to transform web content in and out of the viewport, we use animations. Static animations are used to draw the user’s attention and are easily predictable and they do not depend on the user’s interaction with the web. 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 Bounce Animation along with the implementation.

Semantic UI Static Bounce Animation: Semantic UI Static Bounce Animation is used to remind itself politely by bouncing itself and thereby draw the user’s attention.

Syntax:

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

Example 1: When the button is clicked, the function will be called and we can observe the Semantic UI Static Bounce Animation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI bounce 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 bounce 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 bounce Animation 
            </button> 
        </div> 
    </center> 
  
    <script> 
        $('button').click(function () { 
            $('.image').transition('bounce'); 
        }) 
    </script> 
</body> 
  
</html> 

Output:

Semantic-UI Static Bounce Animation

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Bounce 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 Bounce 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('bounce'); 
        }) 
    </script> 
</body> 
  
</html> 