Skip to Content

Animations

Pre-built CSS animation addons. Install any to get a class name and keyframes.

Available Animations

AddonEffect
animate/fadeInFade in (opacity 0 → 1)
animate/fadeInDownFade in from above
animate/fadeInScaleFade in with scale
animate/fadeOutFade out (opacity 1 → 0)
animate/fadeOutScaleFade out with scale

Usage

import { addon as addonFadeIn } from 'nano-css/addon/animate/fadeIn'; addonFadeIn(nano);

Use as a class name:

<div class="fadeIn">Hello world!</div>

Or as a custom animation:

<div style="animation: fadeIn 1s linear;">Hello world!</div>
Last updated on