Foundation CSS Motion UI Built-in Transitions

Last Updated : 30 Mar, 2022

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 foundation.

Foundation CSS Motion UI is a library for creating flexible UI transitions and animations in websites. We can either use the built-in animations or create our own animations using this library.

Foundation CSS Motion UI Built-in Transitions is a set of pre-defined animations by the foundation CSS.

Foundation CSS Motion UI Built-in Transition Classes:

Animation configuration:

Speed: This class can be used to specify or configure the speed of animation, which can be normal, fast, or slow.
Easing: This class can be used to specify or configure the ease of animation, which can be linear, ease, or bounce.

Animation Types:

Slide: This class is used to add the different types of sliding animation to the object.
Fade: This class is used to add the different types of fading animation to the object, which can be fade-in or fade-out.
Hinge: This class is used to add different types of hinge animation to the object.
Scale: This class is used to add the different types of scaling animation to the object.
Spin: This class is used to add different types of spin animation to the object.

Syntax: Set the speed and easing parameters in the class field of element and then play the required animation as follows:

<img class="fast ease" href="link" alt="text"/>
<script>
    MotionUI.animateIn('img', 'slide-in-down') 
</script>

Example: In the example, we have some animations with speed as slow and easing as ease.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1" />
    <title>GeeksforGeeks</title>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" />
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
    
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
    </script>
</head>

<body style="padding: 30px;">
    <center>
        <div class="ui header green">
            <h1 style="color: green;">GeeksforGeeks</h1> 
        </div> 
        <strong>Foundation CSS Motion UI Built-in Transition</strong>
        <br />
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('slide-in-down')">
                slide-in-down 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('slide-in-right')">
                slide-in-right 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('fade-in')">
                fade-in 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('hinge-in-from-top')">
                hinge-in-from-top 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('hinge-in-from-middle-y')">
                hinge-in-from-middle-y 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('scale-in-up')">
                scale-in-up 
        </button>
        <button type="button" 
                class="hollow button" 
                onclick="playAnimation('spin-in-ccw')">
                spin-in-ccw 
        </button>
        <br /> 
    </center>
    <center> 
        <img id="img" 
             class="slow ease" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
             alt="GFG_logo"/>
    </center>
    <script>
        const playAnimation = (animation) => {
            MotionUI.animateIn('#img', animation)
        }
    </script>
</body>
</html>

Output:

Reference: https://get.foundation/sites/docs/motion-ui.html#built-in-transitions

Foundation CSS Motion UI Built-in Transitions

manavsarkar07

Improve

Article Tags :

Foundation CSS Motion UI Built-in Transitions

Similar Reads

Thank You!

What kind of Experience do you want to share?