Foundation CSS Motion UI Animation
Last Updated :
29 Aug, 2022
A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on Bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
In this article, we will learn about the Motion UI animation of Foundation CSS. Its a Sass library for creating flexible UI transitions and animations. It is a standalone library that powers the transition effects used in a number of Foundation components.
CDN link: The following pre-compiled libraries are included in the head section of the example codes:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css" />
<!-- jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Foundation CSS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/plugins/foundation.util.motion.min.js"></script>
Example 1: The following code demonstrates the animation of an HTML div element using Motion UI animation classes or data attributes. Animation is paused until class ".is-animating" is applied. The CSS animation-fill-mode property will follow the rules for both forward and backward extending the animation properties in both directions by setting the "both" value to it. The CSS animation-play-state property specifies whether the animation is running or paused. The class ".animation-fade" is applied by keeping the animation count as "infinite". A "Click to animate" button is given to trigger the action. User-defined @keyframes rules are implemented for the animation time effect to be divided into smaller parts.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css" />
<!-- jQuery CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Foundation CSS JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/plugins/foundation.util.motion.min.js">
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
.animated-element {
background: green;
height: 180px;
width: 180px;
}
.btnClass {
border: 2px solid #e7e7e7;
color: black;
}
/* user defined keyframes */
@-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;
}
}
/* Animation is paused until ".is-animating" is applied
The animation-fill-mode: "both" will follow the
rules for both forwards and backwards,
extending the animation properties in both directions.
animation-play-state property specifies whether
the animation is running or paused.
*/
.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;
}
.animation-fade {
-webkit-animation-name: my-pulse;
animation-name: my-pulse;
-webkit-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h2 style="color:green;">GeeksforGeeks</h2>
<h4>Foundation CSS Motion UI animation</h4>
<div data-animation class="animated-element
animation animation-fade">
</div>
<br />
<button data-animation-toggle class="btnClass">
Click to animate
</button>
<script>
$(document).ready(() => {
$('[data-animation-toggle]').on('click', () => {
$('[data-animation]').toggleClass('is-animating');
})
})
</script>
</body>
</html>
Output:
Example 2: The following example is another way of implementing the above approach with some differences.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css" />
<!-- jQuery CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Foundation CSS JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/plugins/foundation.util.motion.min.js">
</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>
Output:
Reference: https://get.foundation/sites/docs/motion-ui.html
Similar Reads
Foundation CSS Orbit Using Animation
Foundation CSS is an open-source front-end framework that makes it simple and quick to create an appealing responsive website, email, or app. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is
4 min read
Foundation CSS Motion UI
Foundation CSS is a front-end framework that helps developers create responsive and mobile-friendly websites. It provides a set of CSS and JavaScript tools that can be used to create consistent and visually appealing layouts and user interfaces. Motion UI is a library that is built on top of Foundat
6 min read
Foundation CSS Motion UI Usage in Components
Foundation CSS is one of the best responsive frameworks. The CSS framework adapts to any device, screen, and is accessible widely. We can make beautiful responsive websites with the help of foundation CSS. It is a highly customizable framework. It is an open-source framework built by the ZURB founda
3 min read
CSS animation-timing-function Property
The animation-timing-function property in CSS is used to specify how an animation makes transitions through keyframes. It defines the speed curve of the animation, determining how the intermediate keyframes are calculated and the pacing of the animation. Syntax: animation-timing-function: linear | e
4 min read
CSS Floating Animation
CSS Floating Animation creates a visual effect where elements appear to float smoothly, often mimicking natural movement like drifting in water or air. This effect is achieved using CSS properties such as @keyframes, transform, and animation, giving elements a subtle, continuous floating motion.CSS
1 min read
CSS animation-duration Property
The animation-duration property in CSS is essential for controlling the length of time an animation takes to complete one cycle, making it a vital tool for creating dynamic and engaging web designs. Syntax:animation-duration: time | initial | inherit;Property Value:time: This value is used to specif
3 min read
Foundation CSS Motion UI Installation
Foundation CSS is a front-end framework that provides a consistent and customizable style guide for web development. It includes a wide range of features such as a responsive grid system, typography styles, form styling, and more. Motion UI is a Sass library for creating CSS transitions and animatio
5 min read
Foundation CSS Motion UI Built-in Transitions
Foundation CSS is one of the best responsive frameworks. The CSS framework adapts to any device, screen, and is accessible widely. We can make beautiful responsive websites with the help of foundation CSS. It is a highly customizable framework. It is an open-source framework built by the ZURB founda
3 min read
Foundation CSS Prototyping Arrow Utility
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Primer CSS Fade in Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read