ASKIANIM

For usage in your online applications, Askianim is a library of ready-to-use, cross-browser animations. Excellent for highlighting, home pages, sliders, and attention-directing tips. An element can progressively switch from one style to another through animation. You are free to make as many CSS property changes as you like. You must first define the animation's keyframes before you can use CSS animation.

Installation

npm

npm i askianim

Yarn

yarn add askianim

Import Askistrap CSS in the src/index.js file:

import 'askianim/dist/css/anim.min.css';

Example >> Basic usage

<div class="start__anim anim__slideOutUp">initialize</div>

Example >> Delay classes

<div class="start__anim anim__slideOutUp anim__delay-2s">Delay animation for 2 seconds</div>

Example >> Speed classes

Slow, slower, fast, and Faster classes

<div class="start__anim anim__slideOutUp anim__fast">Animation Speed</div>

Example >> Repeating classes

<div class="start__anim anim__slideOutUp anim__redo-2">animation performed twice</div>

Properties

Rotating, Zooming, Sliding, Flippers, Lightspeed

Rotating

rotateIn, rotateOut, rotateInDownLeft, rotateOutDownLeft, rotateInDownRight, rotateOutDownRight, rotateInUpLeft, rotateOutUpLeft, rotateInUpRight, rotateOutUpRight

Zooming

zoomIn, zoomOut, zoomInDown, zoomOutDown, zoomInLeft, zoomOutLeft, zoomInRight, zoomOutRight, zoomInUp, zoomOutUp

Sliding

slideInDown, slideOutDown, slideInLeft, slideOutLeft, slideInRight, slideOutRight, slideInUp, slideOutUp

Flippers

flip, flipInX, flipInY, flipOutX, flipOutY

Lightspeed

lightSpeedInRight, lightSpeedInLeft, lightSpeedOutRight, lightSpeedOutLeft