Open In App

Primer CSS Fade out Animation

Improve
Improve
Like Article
Like
Save
Share
Report

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 Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Animation is used to emphasize the element using the reusable classes. Primer CSS Fade out animation is used to fade out the element on the screen. This animation occurs only once when the element is revealed. 

In this article, we will discuss Primer CSS Fade out Animation.

Primer CSS Fade out Animation Class:

  • anim-fade-out: This class is used to fade out an element on the screen.

Syntax:

<span class="anim-fade-out">
   ...
</span>

Example 1: This example demonstrates the use of the Primer CSS Fade out animation to animate the text.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Fade out Animation </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Fade out Animation </h3
    </div> <br> <br>
  
    <div class="d-flex flex-justify-center">
        <span class="anim-fade-out">
          <h4> GFG Fade out </h4>
        </span>
    </div>
</body>
</html>


Output:

Primer CSS Fade out Animation

Example 2: This example demonstrates the use of the Primer CSS Fade out Animation to animate the SVG icon.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Fade out Animation </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Fade out Animation </h3
    </div> <br> <br>
  
    <div class="d-flex flex-justify-center">
        <span class="anim-fade-out">
          <svg class="octicon" viewBox="0 0 16 16" 
               width="50" height="50" >
            <path fill-rule="evenodd" 
                  d="M11.5 7a4.499 4.499 0 11-8.998 
                  0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 
                  6 0 111.06-1.06l3.04 3.04a.75.75 0 
                  11-1.06 1.06l-3.04-3.04z" >
            </path>
          </svg>
        </span>
    </div>
</body>
</html>


Output:

Primer CSS Fade out Animation

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



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