Tailwind Css Custom Animation on Hover

user_13798307 0
Viewed 5905

I created an eye icon animation with tailwind however I could not make it on hover :( Could you please guide me on how can animate on hover? :)

Tailwind Eye-Icon-Animation

Thanks for your help!!

tailwind-css hover animation
1 Answers

Extend animation in your config to support hover and group-hover variants

<div class="h-36 w-36 mx-auto flex justify-center items-center group hover:animate-roll">
  <div class="h-full w-full bg-black transform rotate-45 border-radius-eye flex justify-center items-center"> </div>
  <div class="h-12 w-12  bg-white rounded-full z-10 absolute group-hover:animate-movement" ></div>
</div>

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      keyframes: {
      roll: { 
          '0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100%': { transform: 'scale(1)'},
          '50%': { transform: 'scaleY(0)' }
        },

        movement: {
          '0%, 20%, 40%, 60%, 80%, 100%': { transform: 'translateX(0rem)' },
          '10%': { transform: 'translateX(2rem)' },
          '30%': { transform: 'translateX(-2rem)' },
          '50%': { transform: 'translateY(1rem)' },
          '70%': { transform: 'translateY(-1rem)' },
        }

      },
      animation: {
        roll: 'roll 3s infinite ',
        movement: 'movement 5s infinite'
      },
    },
  },
  variants: {
    extend: {
      animation: ['hover', 'group-hover'] 
    }
  },
  plugins: [],
}

Note: As your parent element has flex class, it has full width meaning that on hover of whole line (not only eye) hover effect has taken place. To prevent it, I've relocated h-36 and w-36 from 'eye' to a wrapper and add mx-auto to center it.

user_143050760
Related