Skip to content

Latest commit

 

History

History
34 lines (23 loc) · 763 Bytes

animations.md

File metadata and controls

34 lines (23 loc) · 763 Bytes
Raw

Animations

nano-css has a number of CSS animation addons. Simply install any of the below animation addons and you will have available class and animation with that same name.

  • animate/fadeIn
  • animate/fadeInDown
  • animate/fadeInScale
  • animate/fadeOut
  • animate/fadeOutScale

Read more about the Addon Installation.

Example

import {addon as addonAnimateFadeIn} from 'nano-css/addon/animate/fadeIn';

addonAnimateFadeIn(nano);

Now you can use the fadeIn class name to "fade in" your elements.

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

Or use the fadeIn animation directly to apply custom tween settings.

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