Animation

Utilities for animation.

Using animation-[*], you can animate elements with CSS animations.

animation-

Customizing Animations

Modify Mojo's configuration object to personalize animation utilities and introduce fresh options as per your requirements.



mojo({
    base: {
        definedValues: {
            animation : {
               -- spin ** : {
                    dur: "1.5s linear infinite",
                    keyframes: {
                        "100%": {
                            idle: "transform:rotate(1turn)",
                        },
                    },
                },
               -- flare ** : {
                    dur: "1s cubic-bezier(0, 0, 0.2, 1) infinite",
                    keyframes: {
                        "75%, 100%": {
                            idle: "transform:scale(2) opacity-0",
                        },
                    },
                },
               -- pulse ** : {
                    dur: "2s cubic-bezier(0.4, 0, 0.8, 1) infinite",
                    keyframes: {
                        "0%, 100%": {
                            idle: "opacity-100",
                        },
                        "50%": {
                            idle: "opacity-30",
                        },
                    },
                },
            }
        },
    },
})