Demo de Transiciones - KardoCSS v1.1.1

Propiedades de Transición

transition-all

Hover me

k-transition-all k-duration-300
hover:k-bg-primary hover:k-scale-105
                    

transition-colors

Hover me

k-transition-colors k-duration-300
hover:k-bg-success hover:k-text-white
                    

transition-transform

Hover me

k-transition-transform k-duration-300
hover:k-rotate-45
                    

transition-opacity

Hover me

k-transition-opacity k-duration-500
hover:k-opacity-25
                    

transition-shadow

Hover me

k-transition-shadow k-duration-300
k-shadow-sm hover:k-shadow-xl
                    

transition-none

Hover me (sin transición)

k-transition-none
hover:k-bg-danger
                    

Duraciones

duration-75

75ms

duration-200

200ms

duration-500

500ms

duration-1000

1000ms

Funciones de Easing

ease-linear

Linear

ease-in

Ease In

ease-out

Ease Out

ease-in-out

Ease In-Out

ease-bounce NEW

Bounce

ease-back-in NEW

Back In

ease-back-out NEW

Back Out

ease-back-in-out NEW

Back In-Out

Delays (Retardos) NEW v1.1.1

Pasa el cursor sobre el contenedor para ver los delays en acción:

delay-75

delay-200

delay-500

delay-1000

<div class="group">
  <div class="k-opacity-0 group-hover:k-opacity-100 k-transition-opacity k-delay-75">...</div>
  <div class="k-opacity-0 group-hover:k-opacity-100 k-transition-opacity k-delay-200">...</div>
  <div class="k-opacity-0 group-hover:k-opacity-100 k-transition-opacity k-delay-500">...</div>
  <div class="k-opacity-0 group-hover:k-opacity-100 k-transition-opacity k-delay-1000">...</div>
</div>
                

Animaciones

animate-spin

animate-ping

animate-pulse

animate-bounce

Ejemplos Prácticos

Botón Interactivo

k-btn k-btn-primary
k-transition-all k-duration-300
k-ease-in-out hover:k-scale-105
hover:k-shadow-lg active:k-scale-95
                    

Tarjeta con Hover

Hover me!

Efecto de elevación suave

Loading Spinner

Cargando...

k-w-8 k-h-8 k-border-4
k-border-primary k-border-t-transparent
k-rounded-full k-animate-spin
                    

Notificación Animada

✓ ¡Operación exitosa!

k-bg-success k-text-white
k-p-4 k-rounded-lg
k-animate-slide-in-up
                    

🎉 Implementado en v1.1.1

Esta demo muestra las mejoras implementadas en respuesta al Issue #1 de la comunidad:

transition-none - Deshabilitar transiciones
delay-* - 8 utilidades de delay (75ms a 1000ms)
ease-bounce, ease-back-* - 4 nuevas funciones de easing

Gracias a @screwtape151 por la sugerencia que hizo KardoCSS mejor.