Transiciones y animaciones CSS
Propiedad transition en CSS, animaciones con keyframes y uso de Animate.css con Vue Transition.
Transiciones y animaciones CSS es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Dos formas de animar en CSS
CSS ofrece dos herramientas que combinan perfectamente con las transiciones de Vue: la propiedad transition (interpolar entre dos estados) y @keyframes con animation (líneas de tiempo con varias etapas). Vue puede controlar cualquiera de las dos.
La abreviatura transition
La abreviatura transition combina la propiedad, la duración, la función de temporización y el retraso en una sola línea. El orden es: propiedad, duración, aceleración, retraso.
.box {
/* property duration easing delay */
transition: transform 0.4s ease-in-out 0s;
}Transicionar varias propiedades
Separe varias transiciones mediante comas. Puede animar transform y opacity conjuntamente para conseguir un efecto de deslizamiento y fundido.
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}Cuando transition no es suficiente
transition solo anima entre dos estados. Para rebotes, pulsaciones o movimientos en varias etapas necesita @keyframes, que permite definir numerosos puntos intermedios.
Definir keyframes
@keyframes asigna un nombre a una secuencia de estados mediante porcentajes (o from/to). Cada punto describe los estilos correspondientes a ese momento de la línea de tiempo.
@keyframes bounce-in {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}La propiedad animation
Aplique un conjunto de fotogramas clave con la abreviatura animation: nombre, duración, función de temporización, retraso, número de iteraciones y dirección.
.bounce-enter-active {
animation: bounce-in 0.5s ease both;
}Integrar keyframes en Transition
Coloque animation en la clase enter-active para que se reproduzca durante la inserción. Para la salida, ejecute los mismos fotogramas clave en sentido inverso.
.bounce-leave-active {
animation: bounce-in 0.5s ease reverse both;
}Usar Animate.css
Animate.css es una biblioteca de animaciones de fotogramas clave listas para usar. En lugar de escribir sus propias clases, indique a Vue que use directamente las clases de Animate.css mediante las propiedades de clases personalizadas.
<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->enter-active-class y leave-active-class
<Transition> acepta propiedades para sustituir los nombres de clase generados. enter-active-class y leave-active-class permiten conectar cualquier clase externa, lo que resulta perfecto para Animate.css.
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">Animated by Animate.css</div>
</Transition>Establecer la duración explícitamente
Cuando la temporización CSS es ambigua (por combinar animation y transition), establezca la propiedad duration para que Vue sepa exactamente cuándo debe eliminar las clases. Acepta un número o un objeto con enter/leave.
<Transition :duration="{ enter: 500, leave: 300 }">
<div v-if="show">Precise timing</div>
</Transition>Las funciones de aceleración importan
La función de temporización determina cómo se percibe el movimiento. ease-out ofrece una sensación ágil al entrar, ease-in al salir y cubic-bezier() proporciona un control total.
.pop-enter-active {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}Comprobación rápida
¿Qué propiedad permite aplicar una clase de Animate.css durante la entrada?
Repaso
Comparó la abreviatura transition (interpolación entre dos estados) con @keyframes más animation (líneas de tiempo con varios pasos), y aprendió a integrar Animate.css mediante las props enter-active-class y leave-active-class, usando duration para controlar el tiempo con precisión.
Preguntas frecuentes
¿La lección «Transiciones y animaciones CSS» es gratis?
Sí — el texto completo de «Transiciones y animaciones CSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transiciones y animaciones CSS»?
Propiedad transition en CSS, animaciones con keyframes y uso de Animate.css con Vue Transition. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Transiciones y animaciones CSS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El componente Transition
- Transiciones y animaciones CSS
- Hooks de transición de JavaScript
- TransitionGroup para animaciones de listas