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

Animations are generally used to move web content in and out of the viewport. Static animations can be predetermined and are predictable and are in general used to draw the user’s attention by changing the visibility, position, etc of the element to be animated on the web page. 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 Tada animation and learn how to implement it with the help of code examples.

Semantic UI Static Tada animation: The static animations are used to draw the attention of the user. Semantic UI Static Tada animation draws the user’s attention by giving positive feedback to action.

Syntax:

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

Example 1: If we click the button, the function will be called and we can observe the Tada animation.

HTML

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

Output:

Semantic-UI Static Tada Animation

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

HTML

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