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.

Table of contents

• Overview
• Installation
• Documentation
• Demo
• Support
• Authors
• License

Overview

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

Installation

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:

CSS Import:

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

SCSS Import:

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

LESS Import:

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

Documentation

Base Animations includes styles for fading in content.

Animations (Applies to SCSS/LESS)

| 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 |

Demo

View page example with the animations stylesheet applied.

Support

• IE10+ and all other modern browsers.
• Please specify browsers you need to support in package.json according to browserslist docs.

Authors

Matthew Hartman

• https://twitter.com/matthewhartmans
• https://github.com/matthewhartman

License

Code released under the MIT Open Source license.