Open In App

Primer CSS Fade down Animation

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS animations are used to make the web page more interesting and to improve the user experience.

In this article, we will be seeing Primer CSS fade down Animation.

This animation is used to slide down an element hiding it. This animation should be used on a container with its overflow property set to hidden or the container should be on the bottom of the page. To use this animation the class anim-fade-down is used on the element.

Primer CSS Fade down Animation Classes:

  • anim-fade-down: This class is used on an element to apply fade-down animation on it.

Syntax:

<div class="anim-fade-down">
    ...
</div>

Example 1: This example shows how to use the anim-fade-down class to apply fade-down animation to an element.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Fade Down Animation - Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h4>Fade Down Animation - Primer CSS</h4>
    </div>
    <div class="overflow-hidden d-flex flex-justify-center">
        <div class="anim-fade-down">
            <p>Fade Down Text</p>
        </div>
    </div>
</body>
</html>


Output:

Primer CSS Fade down animation with text

Example 2: The example below shows the use of fade-down animation on the image element.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Fade Down Animation - Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h4>Fade Down Animation on Image - Primer CSS</h4>
    </div>
    <div class="overflow-hidden d-flex flex-justify-center">
        <div class="anim-fade-down">
            <img src=
                 alt="geeksforgeeks-logo"/>
        </div>
    </div>
</body>
</html>


Output:

Primer CSS fade down animation with image

Reference: https://primer.style/css/utilities/animations#fade-down



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