(S)CSS Animation

A set of (S)CSS animation.

Table of Contents (click to expand)

• Installation
• Usage
• Documentation
• Changelog
• How to Contribute
• How We Version
• Resources
• Credits

Installation

$ npm install --save-dev scss-animation

Usage

@import "iamnewton-scss-animation/src/index";

Copy the code below, swapping out the <animation-name> for one of the ones listed below. Add .infinite to keep the animation going on forever.

<div class="animate <animation-name>">Text</div>

Bounce

Bounce animations come from the opposite direction listed in the class (named after the direction it travels) and go slightly past the target and then oscillating a bit giving it the appearance of momentum and bounce.

• bounce-in-down
• bounce-in-left
• bounce-in-right
• bounce-in-up
• bounce-out-down
• bounce-out-left
• bounce-out-right
• bounce-out-up

Fade

Fade animations are a bit more subtle. They still come from the opposite direction listed in the class (named after the direction it travels) but they transition the opacity of the element instead.

• fade-in-down
• fade-in-left
• fade-in-right
• fade-in-up
• fade-in
• fade-out-down
• fade-out-left
• fade-out-right
• fade-out-up
• fade-out

Slide

Slide animations come from the opposite direction listed in the class (named after the direction it travels) with a smooth transition.

• slide-in-down
• slide-in-left
• slide-in-right
• slide-in-up
• slide-out-down
• slide-out-left
• slide-out-right
• slide-out-up

Changelog

This project uses a CHANGELOG, which contains a curated, chronologically ordered list of notable changes for each version of a project. Read more about changelogs.

How to Contribute

Looking to help out? There are numerous ways to support this project and they are all detailed within our CONTRIBUTING doc.

How We Version

We use SemVer for our versioning providing us an opt-in approach to releases. This means we add a version number according to the spec, as you see below. So rather than force developers to consume the latest and greatest, they can choose which version to consume and test any newer ones before upgrading. Please the read the spec as it goes into further detail.

Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes.
• MINOR version when you add functionality in a backward-compatible manner.
• PATCH version when you make backward-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.