An easy CSS animation library.
This repository is distributed with npm.
After installing npm,
you can install papperanimate with this command:
npm install --save papperanimateUse as CDN link in your web site as below,
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/papperanimate@0.0.8/papperanimate.min.css"
rel="stylesheet" crossorigin="anonymous">
<!-- or -->
<link
href="https://cdn.jsdelivr.net/npm/papperanimate@0.0.8/papperanimate.css"
rel="stylesheet" crossorigin="anonymous">
</head>
</html>Install npm module using npm i papperanimate.
import 'papperanimate';
// Use papperanimate_animated class to convert any HTML
// element into an animated HTML element.
// Use any papperanimate class to animate.
<h1 class="papperanimate_animated papperanimate_zoomInUp">
Animate this heading.
</h1>| Animation Name | Class Name |
|---|---|
| bounce | papperanimate_bounce |
| flash | papperanimate_flash |
| pulse | papperanimate_pulse |
| rubberBand | papperanimate_rubberBand |
| shakeX | papperanimate_shakeX |
| shakeY | papperanimate_shakeY |
| tada | papperanimate_tada |
| Wobble | papperanimate_wobble |
| Jello | papperanimate_jello |
| Animation Name | Class Name |
|---|---|
| ZoomIn | papperanimate_zoomIn |
| ZoomInDown | papperanimate_zoomInDown |
| ZoomInLeft | papperanimate_zoomInLeft |
| ZoomInRight | papperanimate_zoomInRight |
| ZoomInUp | papperanimate_zoomInUp |
| Animation Name | Class Name |
|---|---|
| LightInLeft | papperanimate_lightSpeedInLeft |
| LightInRight | papperanimate_lightSpeedInRight |
| LightOutLeft | papperanimate_lightSpeedOutRight |
| LightOutRight | papperanimate_lightSpeedOutRight |
| Animation Name | Class Name |
|---|---|
| Flip | papperanimate_flip |
| FlipInX | papperanimate_flipInX |
| FlipInY | papperanimate_flipInY |
| FlipOutX | papperanimate_flipOutX |
| FlipOutY | papperanimate_flipOutY |
A demo website lives here, using TailwindCSS and Papperanimate. Source code is under site folder.