 |
VOOZH | about |
|
VOOZH | about |
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/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/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/foundation-sites@6.7.4/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.
Output:
Example 2: The following example is another way of implementing the above approach with some differences.
Output:
