Constructor de animaciones

Construye animaciones CSS @keyframes con vista previa

3S • ease-in-out • infinite

Animation Timing & Keyframe Steps

Animation Name:

Easing Function:

Duration:3s

Keyframes (3 stops):

Live Preview & Generated CSS

Live Preview

@keyframes float {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  50% {
    transform: translateY(-12px) scale(1.03);
    opacity: 0.95;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite alternate;
}

// tailwind.config.js extend
keyframes: {
  'float': {
    '0%': { transform: 'translateY(0px)', opacity: '1' },
    '50%': { transform: 'translateY(-12px) scale(1.03)', opacity: '0.95' },
    '100%': { transform: 'translateY(0px)', opacity: '1' },
  },
},
animation: {
  'float': 'float 3s ease-in-out infinite',
}