An easy CSS animation library.
This repository is distributed with npm.
After installing npm,
you can install papperanimate
with this command:
npm install --save papperanimate
Use 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.