Composable CSS Animations Built On animate.css
npm install animate-styles --save
var animate = require('animate-styles')
var yo = require('yo-yo')
var el = yo`<h1 class="${animate.fadeIn}">hello</h1>`
document.body.appendChild(el)The stylesheet will need to be added to the document to view. Here is a way using csjs:
var animate = require('animate-styles')
var csjs = require('csjs')
var style = document.createElement('style')
style.textContent = csjs.getCss(animate)
document.head.appendChild(style)Or check out csjs-extractify for extracting the CSS to files or csjs-injectify for injecting the CSS into the document.
The animations are exported as smaller sets based on animate-config.json.
var style = require('animate-styles/attention_seekers')
var yo = require('yo-yo')
var el = yo`<h1 class="${style.bounce}">bouncing</h1>`var animate = require('animate-styles')
var yo = require('yo-yo')
var csjs = require('csjs')
var style = csjs`
.custom extends ${animate.bounce} {
animation-iteration-count: infinite;
}
`
var el = yo`<h1 class="${style.custom}">animate-styles</h1>`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent