@getbase/animations NPM

Base Animations

Base animations is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

Base Animations is a very thin layer which includes animations for fading in content.

If you have an existing project and would like to include the Base animations module, run the following command:

npm install --save @getbase/animations

Once you have the animations module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

@import url("https://unpkg.com/@getbase/animations/index.css");

/* Import Base Animations */
@import "~@getbase/animations/scss/index";
/* Your Other Styles */
@import "main"

/* Import Base Animations */
@import "~@getbase/animations/less/index";
/* Your Other Styles */
@import "main"

Base Animations includes styles for fading in content.

Class	Purpose	Example	Outcome
`.fade-in`	Apply a `.fade-in`	`<div class="fade-in">Element fades in</div>`	Applies a fade in to a `div` element
`.fade-in-up`	Apply a `.fade-in-up`	`<div class="fade-in-up">Element fades in from bottom to top</div>`	Applies a `.fade-in-top` to a `div` element
`.fade-in-up`	Apply a `.fade-in-up`	`<div class="fade-in-up">Element fades in from bottom to top</div>`	Applies a fade in from bottom to top for a `div` element
`.fade-in-down`	Apply a `.fade-in-down`	`<div class="fade-in-down">Element fades in from top to bottom</div>`	Applies a fade in from top to bottom for a `div` element
`.fade-in-left`	Apply a `.fade-in-left`	`<div class="fade-in-left">Element fades in from right to left</div>`	Applies a fade in from right to left for a `div` element
`.fade-in-right`	Apply a `.fade-in-right`	`<div class="fade-in-right">Element fades in from left to right</div>`	Applies a fade in from left to right for a `div` element