Primer CSS Grow x Animation

Last Updated : 24 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. Primer CSS Grow x Animation grow the element width from 0 to 100 very quickly. In this article, we will discuss Primer CSS Grow x Animation.

Primer CSS Grow x Animation Class:

anim-grow-x: This class is used to grow the element width from 0 to 100 quickly.

Syntax:

<div class="anim-grow-x py-2 
     color-bg-success-emphasis">
</div>

Example 1: The following example demonstrates the Primer CSS Grow x Animation.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title> Primer CSS Grow x 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 Grow x Animation  
        </h3> <br> 
  
        <div class="anim-grow-x py-2  
            color-bg-accent-emphasis"> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Grow x Animation

Example 2: The following example demonstrates the Primer CSS Grow x Animation.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title> Primer CSS Grow x 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 Grow x Animation  
        </h3> <br> 
  
        <div class="anim-grow-x py-4  
            color-bg-done-emphasis"> 
        </div> <br> 
  
        <div class="anim-grow-x py-3  
            color-bg-attention-emphasis"> 
        </div> <br> 
  
        <div class="anim-grow-x py-2  
            color-bg-danger-emphasis"> 
        </div> <br> 
  
        <div class="anim-grow-x py-1  
            color-bg-success-emphasis"> 
        </div> <br> 
    </div> 
</body> 
  
</html>