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 Toast is used to display live feedback to the user. The Toast animation in is used to animate the toast using Toast–animateIn and Toast–animateOut modifier classes.
Primer CSS Toast animation in Class:
- Toast–animateIn: This class is used to animate the toast in from the bottom.
- Toast–animateOut: This class is used to animate the toast out from the bottom.
Syntax:
<div class="Toast Toast--animateIn">
Content
</div>Example 1: This example demonstrates the use of the Primer CSS Toast animation in using Toast–animateIn class.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Toast animation in </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 Toast animation in </h3>
</div>
<div class="d-flex flex-justify-center">
<div class="Toast Toast--animateIn">
<span class="Toast-icon">
<svg class="octicon" viewBox="0 0 15 15" width="25" height="25">
<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>
<span class="Toast-content">
GeeksforGeeks Animate In
</span>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Toast animation
Example 2: This example demonstrates the Primer CSS Toast animation in using Toast–animateOut class.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Toast animation in</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 Toast animation in </h3>
</div>
<div class="d-flex flex-justify-center">
<div class="Toast Toast--animateOut">
<span class="Toast-icon">
<svg class="octicon" viewBox="0 0 15 15"
width="25"
height="25">
<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>
<span class="Toast-content">
GeeksforGeeks Animate Out
</span>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Toast animation
Reference: https://primer.style/css/components/toasts#toast-animation-in