CSS
Tutorial CSS: Animaciones y transiciones
CSS animaciones transiciones: efectos y uso. Aprende a crear efectos con animaciones y transiciones en CSS mediante ejemplos prácticos.
Aprende CSS GRATIS y certifícate¿Qué son las transiciones en CSS y para qué se utilizan?
Las transiciones en CSS permiten que los valores de las propiedades CSS cambien de una manera suave en lugar de abrupta. Esto se logra especificando la duración del cambio y, opcionalmente, una función de temporización (timing function), un retardo (delay) y las propiedades específicas que deben cambiar.
Las transiciones se utilizan para mejorar la experiencia del usuario haciendo que las interacciones con una página web sean más fluidas y atractivas visualmente. En lugar de cambiar instantáneamente de un estado a otro, las animaciones de transición permiten que el ojo humano siga el cambio de una manera natural y continua.
Las aplicaciones prácticas de las transiciones en CSS incluyen:
- Hover states: Cambiar el color de fondo, el tamaño de la fuente u otros estilos cuando un usuario pasa el ratón sobre un elemento.
.button {
background-color: #4CAF50;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #45a049;
}
- Focus states: Suavizar los cambios cuando un campo de formulario recibe o pierde el foco.
input:focus {
border-color: #66afe9;
box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
- Navigation menus: Mostrar o ocultar elementos del menú con un desvanecimiento en lugar de aparecer o desaparecer instantáneamente.
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.menu.open {
max-height: 500px;
}
- Feedback visual: Proporcionar feedback de las acciones del usuario, como el envío de formularios o la activación de botones, para que la interfaz parezca más responsiva y sofisticada.
La clave de las transiciones eficientes y atractivas radica en encontrar el equilibrio adecuado entre la duración y la función de temporización, adaptándolos al contexto específico del diseño de la interfaz de usuario. Utilizadas correctamente, las transiciones pueden elevar la calidad de cualquier diseño web, mejorando la usabilidad y la estética de la página.
Sintaxis de transiciones y usos comunes
La propiedad transition
es fundamental para crear transiciones en CSS. Su sintaxis básica consiste en especificar cuatro componentes opcionales: la propiedad que cambiará, la duración del cambio, la función de temporización y el retraso. La sintaxis es la siguiente:
selector {
transition: [property] [duration] [timing-function] [delay];
}
Si no se especifica alguna de estas propiedades, se utilizarán los valores initial
.
Ejemplo básico
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s; /* Change width over 2 seconds */
}
.box:hover {
width: 200px; /* New width on hover */
}
En este ejemplo, el ancho del cuadro cambiará de 100px a 200px de manera suave durante 2 segundos cuando el ratón lo pase sobre el elemento.
Especificar múltiples propiedades
Se pueden definir transiciones para múltiples propiedades CSS separándolas por comas.
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: blue;
}
En este caso, el ancho, la altura y el color de fondo se transicionarán simultáneamente cuando se pase el ratón sobre el elemento.
timing-function
La función de temporización (timing-function) define cómo la transición progresará. Las funciones más comunes incluyen ease
, linear
, ease-in
, ease-out
, ease-in-out
y también se puede especificar una función de Bézier cúbica personalizada.
.box {
transition: width 2s ease-in-out;
}
El valor ease-in-out
hará que la transición comience y termine lentamente, con una velocidad intermedia constante.
cubic-bezier
Se puede especificar una función de Bézier cúbica personalizada para un control más fino sobre la transición.
.box {
transition: width 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
Este ejemplo crea una transición más dramática y puede ser útil para crear efectos más complejos.
delay
El valor de delay
introduce un retraso antes de que comience la transición.
.box {
transition: width 2s ease 1s; /* Delay of 1s before transition starts */
}
En este ejemplo, la transición no comenzará hasta que haya transcurrido 1 segundo.
shorthand vs. propiedades individuales
Aunque es común usar la propiedad abreviada transition
, también se pueden especificar las propiedades de transición individualmente:
transition-property
: Define las propiedades para las cuales se aplicará la transición.transition-duration
: Establece la duración de la transición.transition-timing-function
: Configura la función de temporización.transition-delay
: Especifica el retraso antes de que comience la transición.
.box {
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
Usar propiedades individuales puede ser útil para una mayor legibilidad y especificidad en archivos CSS grandes.
Usos comunes y prácticas recomendadas
- Desplegables: Hacer que los elementos emergentes aparezcan y desaparezcan suavemente.
.dropdown {
opacity: 0;
transition: opacity 0.3s ease;
}
.dropdown.open {
opacity: 1;
}
- Desplazamientos y transformaciones: Añadir movimiento suave a los elementos en respuesta a eventos del usuario.
.move {
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.move:hover {
transform: translateX(100px);
}
- Estados de formulario: Mejorar la experiencia del usuario en formularios cambiando visualmente los input fields.
.input-field {
border: 1px solid #ccc;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-field:focus {
border-color: #0066cc;
box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}
Las transiciones en CSS permiten añadir sofisticación y funcionalidad, proporcionando una interfaz más atractiva y responsiva.
¿Qué son las animaciones en CSS y para qué se utilizan?
Las animaciones en CSS permiten la creación de movimientos más complejos que las transiciones, ofreciendo mayor control sobre los pasos intermedios de una animación. A diferencia de las transiciones, donde el cambio ocurre entre dos estados (inicio y fin), las animaciones permiten definir múltiples pasos en un proceso, denominados keyframes. Cada keyframe puede definir un estado intermedio y se especifica en determinados puntos del tiempo de la animación, proporcionando granularidad y precisión en el movimiento.
Las animaciones en CSS se utilizan para crear efectos visuales avanzados y mejorar la interacción del usuario con la interfaz. Pueden animar casi cualquier propiedad CSS, como posición, tamaño, color y opacidad, de manera secuencial y repetitiva si se desea.
Principales usos de las animaciones en CSS:
- Enhancements de UI: Mejorar la experiencia del usuario proporcionando feedback visual para interacciones, como al cargar datos.
@keyframes loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: loading 2s linear infinite;
}
- Storytelling: Crear narrativas visuales con movimientos fluidos para guiar al usuario a través de los contenidos.
@keyframes slidein {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.sliding-menu {
animation: slidein 1s ease-in-out;
}
- Atención gráfica: Atraer la atención hacia elementos específicos mediante animaciones recurrentes.
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.highlight {
animation: pulse 1s infinite;
}
- Emulación de físicas reales: Imitar el comportamiento natural de objetos, proporcionando una sensación más natural y menos artificial.
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.bouncing {
animation: bounce 2s;
}
Las animaciones en CSS se definen con la propiedad animation
, que puede especificar la duración, la función de temporización, el número de repeticiones y otros parámetros. Los keyframes se crean utilizando la regla @keyframes
, donde se definen los estados intermedios de la animación.
@keyframes example {
0% { background-color: red; left: 0px; top: 0px; }
25% { background-color: yellow; left: 200px; top: 0px; }
50% { background-color: blue; left: 200px; top: 200px; }
75% { background-color: green; left: 0px; top: 200px; }
100% { background-color: red; left: 0px; top: 0px; }
}
.box {
position: absolute;
animation: example 5s linear infinite;
}
Este ejemplo muestra una animación que mueve un elemento a lo largo de un cuadrado mientras cambia su color, repitiéndose indefinidamente con una duración de 5 segundos por ciclo. La animación está controlada por los keyframes que definen el comportamiento en los porcentajes 0%, 25%, 50%, 75%, y 100% del ciclo completo.
Las animaciones en CSS permiten tanto mejorar la estética de una página web como proporcionar información visual del estado de la interfaz y las interacciones del usuario.
Sintaxis de animaciones y usos comunes
Para definir animaciones en CSS se utilizan las propiedades asociadas a animation
y la regla @keyframes
. La propiedad animation
permite controlar distintos aspectos de la animación como su duración, el timing function, el número de repeticiones, entre otros. La regla @keyframes
es donde se definen los estados intermedios de la animación en términos de diferentes etapas temporales.
La sintaxis básica para definir una animación es la siguiente:
selector {
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}
- name: Nombre de la animación asociada con
@keyframes
. - duration: Duración de la animación (ej.
2s
para 2 segundos). - timing-function: Cómo progresa la animación en el tiempo. Valores comunes:
ease
,linear
,ease-in
,ease-out
,ease-in-out
. - delay: Tiempo de espera antes de que comience la animación.
- iteration-count: Número de veces que la animación se repite. Valores comunes:
<number>
oinfinite
. - direction: Dirección de la animación. Valores:
normal
,reverse
,alternate
,alternate-reverse
. - fill-mode: Cómo aplica el estilo de la animación fuera de su tiempo de ejecución. Valores:
none
,forwards
,backwards
,both
. - play-state: Estado de la animación. Valores:
running
,paused
.
Definición de @keyframes
La regla @keyframes
define el movimiento y los cambios en las propiedades CSS en diferentes puntos de la línea de tiempo de la animación. La estructura básica es:
@keyframes nombre_animacion {
0% { /* estado inicial */ }
50% { /* estado intermedio */ }
100% { /* estado final */ }
}
Ejemplo básico
@keyframes example {
0% { background-color: red; left: 0px; }
50% { background-color: yellow; left: 100px; }
100% { background-color: green; left: 200px; }
}
.box {
position: absolute;
animation: example 4s linear infinite;
}
En este ejemplo, el elemento .box
cambia de color y posición de izquierda a derecha en un ciclo de 4 segundos que se repite indefinidamente.
Múltiples animaciones en un mismo selector
Se pueden definir múltiples animaciones en un mismo selector separándolas por comas.
@keyframes move {
0% { top: 0px; }
100% { top: 200px; }
}
@keyframes colorChange {
0% { background-color: red; }
100% { background-color: blue; }
}
.elemento {
position: absolute;
animation: move 2s ease-in-out, colorChange 2s ease-in-out;
}
control de parámetros individuales
También es posible especificar propiedades individuales para una configuración más detallada:
.box {
animation-name: example;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
Usos comunes de las animaciones CSS
- Animaciones de entrada y salida:
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fading-element {
animation: fadeIn 2s ease-in;
}
- Animaciones de carga:
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: rotate 1s linear infinite;
}
- Animaciones de atención:
@keyframes shake {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-10px); }
}
.shaking-element {
animation: shake 0.5s ease-in-out infinite;
}
- Animaciones secuenciales:
@keyframes stepAnimation {
0% { opacity: 0; transform: translateY(-20px); }
50% { opacity: 0.5; transform: translateY(0); }
100% { opacity: 1; transform: translateY(-20px); }
}
.sequential {
animation: stepAnimation 3s steps(5, end) infinite;
}
Las animaciones permiten elevar la experiencia del usuario, añadiendo dinámica y retroalimentación visual para mejorar la usabilidad y la estética de una página web.
Ejercicios de esta lección Animaciones y transiciones
Evalúa tus conocimientos de esta lección Animaciones y transiciones con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la diferencia entre animaciones y transiciones en CSS.
- Aprender a utilizar las propiedades
transition
y sus subpropiedades. - Crear animaciones con la propiedad
@keyframes
. - Integrar animaciones y transiciones en proyectos web para mejorar la UX.
- Optimizar el rendimiento de animaciones y transiciones en diferentes dispositivos.