Primer CSS Toast animation in

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.

Output:

👁 Image

Example 2: This example demonstrates the Primer CSS Toast animation in using Toast--animateOut class.

Output:

👁 Image

Reference: https://primer.style/#toast-animation-in