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 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" > w3wiki </ h1 > < h3 > Primer CSS Fade up Animation </ h3 > </ div > < br > < br > < div class = "d-flex flex-justify-center" > < div class = "anim-fade-up" > < h4 > w3wiki Fade up </ h4 > </ div > </ div > </ body > </ html > |
Output:
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" > w3wiki </ 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 > |
Output:
Reference: https://primer.style/css/utilities/animations#fade-up
Contact Us