@vace/animations

CSS animations

Usage

import all animations css

import '@vace/animations/animations.css'

<div class="ani-fade-in"></div>

import all animations json config

import animations from '@vace/animations/animations.json'

create css code from json config

import { animations, stringify } from '@vace/animations'

/**
 * @keyframes ani-fade-in { ...
 * .ani-fade-in {
 *   animation: var(--animate-duration, 1s) infinite both ani-fade-in
 * }
 */
const csscode = stringify(animations[0], { prefix: 'ani' })
// or
const csscode = stringify('fade-in', { prefix: 'ani' })

animation decorator

• @global file config
• @delay : 'animationDelay'
• @direction : 'animationDirection'
• @duration : 'animationDuration'
• @mode : 'animationFillMode'
• @count : 'animationIterationCount'
• @state : 'animationPlayState'
• @easeing : 'animationTimeingFunction'
• @backface : 'backfaceVisibility'

prefix

• text-* text animation (letter-spacing,text-shadow)
• bg-* background animation (background-color,background-position)
• ccw counterclockwise
• fwd forward
• bck back
• diag diagonal
• *-l left
• *-r right
• *-t top
• *-b bottom

Credits

• animate.css
• animista.net

License

This project is licensed under the MIT License.