Editor de animaciones CSS

Construye animaciones CSS @keyframes con una línea de tiempo visual y vista previa

3s • ease-in-out

Animation Properties & Keyframe Timings

Animation Name:

Duration (s):

Timing Function:

Iteration Count:

Direction:

Timeline Keyframe Breakdown:

0% Step

scale(1) rot(0deg)

50% Step

scale(1.03) rot(1deg)

100% Step

scale(1) rot(0deg)

Live Animation Stage

CSS

Interactive Node

GPU Transform 60fps

Pure CSS Animation & @keyframes Rule

/* CSS Animation */
.animated-element {
  animation: floatCard 3s ease-in-out 0s infinite alternate both;
}

@keyframes floatCard {
  0% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) scale(1.03) rotate(1deg);
    opacity: 0.95;
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
}

tailwind.config.js Keyframes & Animation Extender

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        floatCard: {
          '0%': { transform: 'scale(1) rotate(0deg)', opacity: '1' },
          '50%': { transform: 'scale(1.03) rotate(1deg)', opacity: '0.95' },
          '100%': { transform: 'scale(1) rotate(0deg)', opacity: '1' },
        },
      },
      animation: {
        floatCard: 'floatCard 3s ease-in-out infinite',
      },
    },
  },
};