Primer CSS Fade up Animation

Last Updated : 08 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.

Primer CSS Animation is used to emphasize the element using the reusable classes. Primer CSS Fade-up Animation is used to animate the element by sliding it from below the fold area using the anim-fade-up class.

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

Primer CSS Fade up Animation Class:

anim-fade-up: This class is used to animate the element up from below.

Syntax:

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

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

HTML

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

Output:

Primer CSS Fade up Animation

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Fade up 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 up Animation </h3>  
    </div> <br> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="anim-fade-up"> 
            <svg class="octicon" viewBox="0 0 16 16" 
               width="50" height="50" > 
                <path fill-rule="evenodd" 
                      d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25  
                        0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25  
                        0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0  
                        11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292  
                        2.757A.75.75 0 004.75 16h6.5a.75.75 0  
                        00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75  
                        1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018  
                        12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72  
                        5.72 0 01-.765-2.5z" > 
                </path> 
            </svg> 
        </div> 
    </div> 
</body> 
</html>