Home / animate / api / effects

Effects

You may want to use pre-made effects like the onces animate.css provide, I initially planned on bundling this functionality in, but because of the plentiful number of libraries that do the same thing, I suggest using those instead, and if you want to create your own effects from CSS, you can use CSS Keyframe style JSON object, make sure to read the documentation for KeyframeParse

I suggest @shoelace-style/animations for all your animate.css needs, you can use it like this,

import ASTRO_ESCAPED_LEFT_CURLY_BRACKET animate } from "@okikio/animate";
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET bounce } from '@shoelace-style/animations';

animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    keyframes: bounce,
    loop: true,
    easing: "in-sine"
})

or

if you just need some quick effects go to github.com/wellyshen/use-web-animations/ and copy the keyframes array for the effect you want, remember to say thank you to @wellyshen for all his hardwork, 😂.