Swing

Playful link that swings from side to side on hover

Installation

Add the keyframe

Add the keyframe to the keyframes object in your tailwind.config.js file.

tailwind.config.ts

import type { Config } from 'tailwindcss';
 
const config: Config = {
  // ...
  theme: {
    // ...
    extend: {
      // ...
      keyframes: {

        swing: {
          '15%': { transform: 'translateX(5px)' },
          '30%': { transform: 'translateX(-5px)' },
          '50%': { transform: 'translateX(3px)' },
          '80%': { transform: 'translateX(2px)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
    },
  },
};
 
export default config;

Add the animation

Add the animation to the animation object in your tailwind.config.js file.

tailwind.config.ts

import type { Config } from 'tailwindcss';
 
const config: Config = {
  // ...
  theme: {
    // ...
    extend: {
      // ...
      animation: {
        swing: 'swing 1s ease 1', 
      },
    },
  },
};
 
export default config;

Swing

Installation

Add the keyframe

Add the animation

On this page