<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
body {
margin-left: 10px;
margin-right: 10px;
}
.container {
max-width: 400px;
margin: auto;
}
.myBox {
background: rgba(0, .1, .1, .1);
padding: 1rem;
text-align: center;
margin-bottom: 1rem;
}
.myButton {
padding: .75rem 1.25rem;
background-color: rgba(0, 0, 0, .15);
border-radius: 2px;
color: rgba(255, 255, 255, .66);
box-shadow: 0 .125rem .0625rem rgba(0, 0, 0, .2);
cursor: pointer;
}
.myButton--success {
background-color: green;
&:hover {
background-color: black;
}
&:active {
background-color: grey;
}
}
/* 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;
}
.animation.is-animating {
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes my-pulse {
0% {
opacity: .25;
}
50% {
opacity: 1;
}
100% {
opacity: .25;
}
}
@keyframes my-pulse {
0% {
opacity: .25;
}
50% {
opacity: 1;
}
100% {
opacity: .25;
}
}
.animated-element {
display: block;
color: white;
font-weight: bold;
text-align: center;
padding: 3rem 0;
margin-bottom: 1rem;
background: linear-gradient(90deg, #0097c9,
#4653e9, #a002bf);
}
.animation-fade {
-webkit-animation-name: my-pulse;
animation-name: my-pulse;
-webkit-animation-duration: .7s;
animation-duration: .7s;
// number of times for animation
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h2
style
=
"color:green;"
>GeeksforGeeks</
h2
>
<
h4
>Foundation CSS Motion UI animation</
h4
>
</
center
>
<
div
class
=
"container"
>
<
div
class
=
"myBox"
>
<
div
data-animation
class
=
"animated-element animation animation-fade"
>
Animate me
</
div
>
<
button
data-animation-start
class
=
"myButton myButton--success"
>
Start animation
</
button
>
<
button
data-animation-stop
class
=
"myButton"
style
=
"display:none;"
>
Stop animation
</
button
>
</
div
>
</
div
>
<
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
>