<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
div
style
=
"margin-top: 100px"
class
=
"ui container"
>
<
h2
>Transitions</
h2
>
<
img
class
=
"ui image medium"
src
=
<
br
>
<
button
class
=
"ui button jiggle"
>Jiggle</
button
>
<
button
class
=
"ui button flash"
>Flash</
button
>
<
button
class
=
"ui button shake"
>Shake</
button
>
<
button
class
=
"ui button pulse"
>Pulse</
button
>
<
button
class
=
"ui button tada"
>Tada</
button
>
<
button
class
=
"ui button bounce"
>Bounce</
button
>
<
button
class
=
"ui button glow"
>Glow</
button
>
</
div
>
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
<
script
>
$('.jiggle').click(function () {
$('.image').transition('jiggle');
})
$('.flash').click(function () {
$('.image').transition('flash');
})
$('.shake').click(function () {
$('.image').transition('shake');
})
$('.pulse').click(function () {
$('.image').transition('pulse');
})
$('.tada').click(function () {
$('.image').transition('tada');
})
$('.bounce').click(function () {
$('.image').transition('bounce');
})
$('.glow').click(function () {
$('.image').transition('glow');
})
</
script
>
</
body
>
</
html
>