<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.myButton {
padding: .75rem 1.25rem;
background-color: red;
border-radius: 2px;
color: white;
box-shadow: 0 .125rem .0625rem rgba(0, 0, 0, .2);
cursor: pointer;
}
.myButton--success {
background-color: green;
}
/* Animation is paused until ".is-animating" is applied */
.animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border-radius: 50%;
width: 300px;
height: 300px;
}
.animation.is-animating {
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes my-pulse {
0% {
opacity: .25;
transform: rotate(0deg);
}
50% {
opacity: 1;
transform: rotate(180deg);
}
100% {
opacity: .25;
transform: rotate(360deg);
}
}
@keyframes my-pulse {
0% {
opacity: .25;
transform: rotate(0deg);
}
50% {
opacity: 1;
transform: rotate(180deg);
}
100% {
opacity: .25;
transform: rotate(360deg);
}
}
.animated-element {
color: white;
font-weight: bold;
text-align: center;
padding: 3rem 0;
margin-bottom: 1rem;
background: linear-gradient(90deg, #afd771, #41e735, green);
}
.animation-fade {
-webkit-animation-name: my-pulse;
animation-name: my-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green;"
>GeeksforGeeks</
h1
>
<
h3
><
u
>Foundation CSS Motion UI</
h3
></
u
>
</
center
>
<
center
>
<
div
data-animation class="animated-element
animation animation-fade">
Animation Demonstration
</
div
>
<
button
data-animation-start class="myButton
myButton--success">
PLAY
</
button
>
<
button
data-animation-stop
class
=
"myButton"
style
=
"display:none;"
>
PAUSE
</
button
>
</
center
>
<
script
>
$(document).ready(() => {
$('[data-animation-start]').on('click', () => {
$('[data-animation]').addClass('is-animating');
$('[data-animation-start]').hide();
$('[data-animation-stop]').show();
});
$('[data-animation-stop]').on('click', () => {
$('[data-animation]').removeClass('is-animating');
$('[data-animation-start]').show();
$('[data-animation-stop]').hide();
})
})
</
script
>
</
body
>
</
html
>