Pure CSS Animation Library. Made with love at Later.com
- Simply add css or scss files to your project
- Apply animation class to animate an element
- Live Demo
- Link the stylesheet to your document's
<head>
<head>
<link rel="stylesheet" type="text/css" href="animation-library-min.css">
</head>- Add the animation class to the HTML element you'd like to animate.
<div class="u--fadeIn " >Animation Library</div>- List of avialable animation classes:
| Fade | Slide | Bounce | Flip | Rotate | Zoom | Attention |
|---|---|---|---|---|---|---|
u--fadeIn |
u--slideUp |
u--bounceIn |
u--flip |
u--rotate |
u--zoomIn |
u--pulse |
u--fadeInLeft |
u--slideDown |
u--bounceOut |
u--flipX |
u--rotateUpLeft |
u--zoomInDown |
u--flash |
u--fadeInRight |
u--slideLeft |
u--bounceInLeft |
u--flipY |
u--rotateUpRight |
u--zoomInUp |
u--bounce |
u--fadeInUp |
u--slideRight |
u--bounceInRight |
u--rotateDownLeft |
u--zoomOut |
u--shake |
|
u--fadeInDown |
u--bounceInUp |
u--rotateDownRight |
u--zoomOutDown |
u--swing |
||
u--fadeOut |
u--bounceInDown |
u--zoomOutUp |
||||
u--fadeOutLeft |
||||||
u--fadeOutRight |
||||||
u--fadeOutUp |
||||||
u--fadeOutDown |
- Please create a pull request
- Do not commit directly to master
- Follow current class naming convention(BEM)
<style>
.u--camelCaseName {}
</style>- Create a pen to showcase the animation if possible :)
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
- Charming.js by Yuan Qing
- main.js by Mary Lou
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent