On gists

Animations

Tailwind CSS

demo.html Raw #

<div class="flex justify-around p-20">
  <!-- Wiggle animation -->
  <div class="flex flex-col gap-4">
    <span>wiggle</span>
    <div class="h-16 w-16 animate-wiggle rounded-md bg-pink-400"></div>
  </div>

  <!-- heartBeat animation -->
  <div class="flex flex-col gap-4">
    <span>heartBeat</span>
    <div class="h-16 w-16 animate-heartBeat rounded-md bg-blue-400"></div>
  </div>

  <!-- flipHorizontal animation -->
  <div class="flex flex-col gap-4">
    <span>flipHorizontal</span>
    <div class="h-16 w-16 animate-hflip rounded-md bg-orange-400 text-center"><span>Flip H</span></div>
  </div>

  <!-- flipVertical animation -->
  <div class="flex flex-col gap-4">
    <span>flipVertical</span>
    <div class="h-16 w-16 animate-vflip rounded-md bg-indigo-400 text-center"><span>Flip V</span></div>
  </div>
</div>

<div class="flex justify-around p-20">
  <!-- Swing animation -->
  <div class="flex flex-col gap-4">
    <span>swing</span>
    <span class="animate-swing text-3xl font-extrabold text-red-400">Swinging</span>
  </div>

  <!-- rubberBand animation -->
  <div class="flex flex-col gap-4">
    <span>rubberBand</span>
    <span class="animate-rubberBand text-3xl font-extrabold text-violet-400">Stretching</span>
  </div>

  <!-- flash animation -->
  <div class="flex flex-col gap-4">
    <span>flash</span>
    <span class="animate-flash text-3xl font-extrabold text-orange-800">Flashing</span>
  </div>
</div>

<div class="flex justify-around p-20">
  <!-- headShake animation -->
  <div class="flex flex-col gap-4">
    <span>headShake</span>
    <span class="animate-headShake text-3xl font-extrabold text-green-500">Shaking Heads</span>
  </div>

  <!-- wobble animation -->
  <div class="flex flex-col gap-4">
    <span>wobble</span>
    <span class="animate-wobble text-3xl font-extrabold text-blue-500">Wobbling</span>
  </div>

  <!-- wobble animation -->
  <div class="flex flex-col gap-4">
    <span>jello</span>
    <span class="animate-jello text-3xl font-extrabold text-purple-400">Jello</span>
  </div>
</div>

tailwind.config.js Raw #

// https://play.tailwindcss.com/IU44IlYAxk

module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-15deg)' },
          '50%': { transform: 'rotate(15deg)' },
        },
        heartBeat: {
          '0%': { transform: 'scale(1);' },
          '14%': { transform: 'scale(1.3);' },
          '28%': { transform: 'scale(1);' },
          '42%': { transform: 'scale(1.3);' },
          '70%': { transform: 'scale(1);' },
        },
        flipHorizontal: {
          '50%': { transform: 'rotateY(180deg)' },
        },
        flipVertical: {
          '50%': { transform: 'rotateX(180deg)' },
        },
        swing: {
          '20%': {
            transform: 'rotate3d(0, 0, 1, 15deg)',
          },

          '40%': {
            transform: 'rotate3d(0, 0, 1, -10deg)',
          },

          '60%': {
            transform: 'rotate3d(0, 0, 1, 5deg)',
          },

          '80%': {
            transform: 'rotate3d(0, 0, 1, -5deg)',
          },
          to: {
            transform: 'rotate3d(0, 0, 1, 0deg)',
          },
        },
        rubberBand: {
          from: {
            transform: 'scale3d(1, 1, 1)',
          },

          '30%': {
            transform: 'scale3d(1.25, 0.75, 1)',
          },

          '40%': {
            transform: 'scale3d(0.75, 1.25, 1)',
          },

          '50%': {
            transform: 'scale3d(1.15, 0.85, 1)',
          },

          '65%': {
            transform: 'scale3d(0.95, 1.05, 1)',
          },

          '75%': {
            transform: 'scale3d(1.05, 0.95, 1)',
          },
          to: {
            transform: 'scale3d(1, 1, 1)',
          },
        },
        flash: {
          '25%, 40%': { opacity: '0' },
          '50%': { opacity: '1' },
          '75%': { opacity: '0' },
        },
        headShake: {
          '0%': {
            transform: 'translateX(0)',
          },
          '6.5%': {
            transform: 'translateX(-6px) rotateY(-9deg)',
          },

          '18.5%': {
            transform: 'translateX(5px) rotateY(7deg)',
          },

          '31.5%': {
            transform: 'translateX(-3px) rotateY(-5deg)',
          },

          '43.5%': {
            transform: 'translateX(2px) rotateY(3deg)',
          },
          '50%': {
            transform: 'translateX(0)',
          },
        },
        wobble: {
          from: {
            transform: 'translate3d(0, 0, 0)',
          },

          '15%': {
            transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)',
          },

          '30%': {
            transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)',
          },

          '45%': {
            transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)',
          },

          '60%': {
            transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)',
          },

          '75%': {
            transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)',
          },

          to: {
            transform: 'translate3d(0, 0, 0)',
          },
        },
        jello: {
          'from, 11.1%,to': {
            transform: 'translate3d(0, 0, 0)',
          },

          '22.2%': {
            transform: 'skewX(-12.5deg) skewY(-12.5deg)',
          },

          '33.3%': {
            transform: 'skewX(6.25deg) skewY(6.25deg)',
          },

          '44.4%': {
            transform: 'skewX(-3.125deg) skewY(-3.125deg)',
          },

          '55.5%': {
            transform: 'skewX(1.5625deg) skewY(1.5625deg)',
          },

          '66.6%': {
            transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
          },

          '77.7%': {
            transform: 'skewX(0.390625deg) skewY(0.390625deg)',
          },

          '88.8%': {
            transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)',
          },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        heartBeat: 'heartBeat 1s infinite',
        hflip: 'flipHorizontal 2s infinite',
        vflip: 'flipVertical 2s infinite',
        swing: 'swing 2s ease-out infinite',
        rubberBand: 'rubberBand 1s infinite',
        flash: 'flash 2s infinite',
        headShake: 'headShake 2s infinite',
        wobble: 'wobble 1s infinite',
        jello: 'jello 2s infinite',
      },
    },
  },
  plugins: [],
}