Open In App

Semantic-UI Static Animations

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet"
    />
    <script src=
    </script>
    <script src=
   </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=
          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>


Output:

Semantic-UI Static Animations

Semantic-UI Static Animations

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



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