Semantic-UI Static Animations
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
Reference link: https://semantic-ui.com/modules/transition.html
Please Login to comment...