Primer CSS Fade in Animation

Last Updated : 12 Apr, 2022

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.

The Animation is used to emphasize the element using the reusable animation classes. Fade in Animation is used to fade in the element on the screen by specifying the .anim-fade-in class. This animation occurs only once when the element is revealed.

Primer CSS Fade in Animation Class:

anim-fade-in: This class is used to fade in the element on the screen.

Syntax:

<span class="anim-fade-in">
   Content
</span>

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Fade in 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 in Animation  
        </h3>  
    </div> 
    <br> 
    <div class="d-flex flex-justify-center"> 
        <span class="anim-fade-in"> 
            <h4> GeeksforGeeks Fade in </h4> 
        </span> 
    </div> 
</body> 
</html>

Output:

Primer CSS Fade in Animation

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Fade in 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 in Animation  
        </h3> 
    </div> 
    <br> 
    <div class="d-flex flex-justify-center">  
        <span class="anim-fade-in"> 
          <svg class="octicon" 
               viewBox="0 0 15 15"
               width="35" 
               height="35"> 
            <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25  
                7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0  
                011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> 
            </path> 
         </svg> 
        </span>  
    </div> 
</body> 
</html>