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
Last Updated :
21 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...