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.