Primer CSS Fade in Animation Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like 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. 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/[email protected]/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/[email protected]/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> Output: Primer CSS Fade in Animation Reference: https://primer.style/product/css-utilities/#fade-in Comment More infoAdvertise with us Next Article Primer CSS Fade out Animation S singh_teekam Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Fade out Animation 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 2 min read Primer CSS Fade up Animation 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 2 min read Primer CSS Fade down Animation 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 proper 2 min read CSS Tooltip Fade In Animation The tooltip is used to display information about an element when the mouse has hovered over that element. Tooltips are by default displayed with no delay (animation). To create a tooltip fade-in animation using CSS, you can apply the opacity property to the tooltip element and animate it using CSS t 2 min read CSS Tooltip Fade In Animation The tooltip is used to display information about an element when the mouse has hovered over that element. Tooltips are by default displayed with no delay (animation). To create a tooltip fade-in animation using CSS, you can apply the opacity property to the tooltip element and animate it using CSS t 2 min read Primer CSS Hover Animation 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. It is highly reusable and flexible. It is created with GitHub’s design system. Animations are an important tool to attract users to 2 min read Like