Logo Windi CSS

Animation

Utilities for animating elements with CSS animations.

none
spin
ping
pulse
bounce
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

To add new animation @keyframes, use the keyframes section of your theme configuration:
windi.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}