papperanimate
v0.0.9
Published
An easy animation library
Readme
Papper Animate
An easy CSS animation library.
Installation
Using NPM
This repository is distributed with npm.
After installing npm,
you can install papperanimate with this command:
npm install --save papperanimateUsing CDN
Use as CDN link in your web site as below,
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/papperanimate.min.css"
rel="stylesheet" crossorigin="anonymous">
<!-- or -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/papperanimate.css"
rel="stylesheet" crossorigin="anonymous">
</head>
</html>Usage
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 List
Basic
| 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 |
Zoom
| Animation Name | Class Name
|----------|:-------------
| ZoomIn | papperanimate_zoomIn |
| ZoomInDown | papperanimate_zoomInDown |
| ZoomInLeft | papperanimate_zoomInLeft |
| ZoomInRight | papperanimate_zoomInRight |
| ZoomInUp | papperanimate_zoomInUp |
Light
| Animation Name | Class Name
|----------|:-------------
| LightInLeft | papperanimate_lightSpeedInLeft |
| LightInRight | papperanimate_lightSpeedInRight |
| LightOutLeft | papperanimate_lightSpeedOutRight |
| LightOutRight | papperanimate_lightSpeedOutRight |
Flip
| Animation Name | Class Name |----------|:------------- | Flip | papperanimate_flip |
WebSite
A demo website lives here, using TailwindCSS and Papperanimate. Source code is under site folder.