Open In App

Foundation CSS Motion UI Animation

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <!-- jQuery CDN -->
    <script src=
    </script>
    <!-- Foundation CSS JavaScript -->
    <script src=
    </script>
    <script src=
    </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=
    <link rel="stylesheet" href=
  
    <!-- jQuery CDN -->
    <script src=
    </script>
  
    <!-- Foundation CSS JavaScript -->
    <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>


Output:

 

Reference: https://get.foundation/sites/docs/motion-ui.html



Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads