Semantic-UI Static Animations

Last Updated : 21 Apr, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Static animation is a set of transition animations that we can perform on an element like an image or text.

Semantic UI Static animation types:

Jiggle: The element jiggles to draw attention towards its shape.
Flash: The element flashes to draw attention to itself.
Shake: The element shakes to draw attention towards its position.
Pulse: The element pulse to draw attention towards its visibility.
Tada: The animation tells that positive action has taken place.
Bounce: The element bounces as a reminder.
Glow: The element glows to show its position.

Note: Replace the animation type as needed in the following syntax.

Syntax:

$('.gfg.icon').transition('jiggle')

Example: In the following example, we have the icon and set of seven buttons performing each of the above animations when clicked.

HTML

<!DOCTYPE html>
<html>
  <head>
    <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">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
   </script>
    <style>
      body {
        padding: 10px;
        margin: 10px;
      }
 
      #container1 {
        height: 1000px;
      }
 
      #container2 {
        height: 1000px;
      }
    </style>
  </head>
 
  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>GeeksforGeeks</h1>
        </div>
        <strong>Semantic UI Static animation</strong>
      </center>
    </div>
    <div class="ui segment">
      <h1>Welcome to GeeksforGeeks</h1>
       
<p>Find the best programming tutorials here.</p>
 
 
      <center>
        <img src=
"https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg"
          alt="GeeksforGeeks"
          class="gfg icon"
        />
        <br/>
        <br/>
        <button class="ui button"
                onclick="runAnimation('jiggle')">
          Jiggle
        </button>
        <button class="ui button"
                onclick="runAnimation('flash')">
          Flash
        </button>
        <button class="ui button"
                onclick="runAnimation('shake')">
          Shake
        </button>
        <button class="ui button"
                onclick="runAnimation('pulse')">
          Pulse
        </button>
        <button class="ui button"
                onclick="runAnimation('tada')">
          Tada
        </button>
        <button class="ui button"
                onclick="runAnimation('bounce')">
          Bounce
        </button>
        <button class="ui button"
                onclick="runAnimation('glow')">
          Glow
        </button>
      </center>
    </div>
 
    <script>
      function runAnimation(animation) {
        $('.gfg.icon').transition(animation)
      }
    </script>
  </body>
</html>