Gradientes, transformaciones y animaciones en CSS

Sistema de ejes en el espacio visual

Antes de aplicar gradientes o transformaciones, es fundamental entender cómo se posicionan los elementos en pantalla. El sistema de ejes define direcciones horizontales, verticales y de profundidad dentro del navegador.

Representación del sistema de ejes X, Y y Z en un elemento HTML — Los ejes definen cómo se orientan y mueven los elementos en pantalla.

Ejes X, Y y Z en CSS

CSS trabaja principalmente en dos dimensiones, pero incorpora el eje Z para simular profundidad. Comprender estas direcciones permite aplicar gradientes, transformaciones y animaciones de forma controlada.

/* Estilo base del elemento visible */
.box {
  width: 300px; /* Ancho del elemento en el eje X */
  height: 120px; /* Alto del elemento en el eje Y */
  background-color: #eaeaea; /* Color neutro para visualizar el área */
  transform: translateZ(0); /* Posición inicial sobre el eje Z */
}

Direcciones de los ejes X horizontal, Y vertical y Z profundidad — X se mueve de izquierda a derecha, Y de arriba hacia abajo y Z hacia adelante o atrás.

Elemento base para aplicar gradientes

Los gradientes se aplican sobre fondos de elementos. Para entender su comportamiento, primero se define una estructura HTML simple que servirá como superficie visual del degradado.

<!-- Contenedor que recibirá el gradiente de fondo -->
<div class="gradient-box">
  Texto de ejemplo dentro del contenedor
</div>

Gradiente lineal por defecto

Un gradiente lineal en CSS genera una transición progresiva entre colores. Si no se indica una dirección, el degradado avanza automáticamente desde la parte superior hacia la inferior del elemento.

/* Estilo del contenedor con gradiente lineal */
.gradient-box {
  width: 100%; /* Ocupa todo el ancho disponible */
  height: 120px; /* Altura visible del gradiente */
  background-image: linear-gradient(red, yellow);
  /* Al no indicar dirección, el gradiente va de arriba hacia abajo */
}

Gradiente lineal vertical aplicado por defecto en CSS — El degradado comienza arriba y termina abajo si no se especifica dirección.

Dirección horizontal del gradiente

CSS permite controlar hacia dónde avanza un gradiente. Al definir una dirección horizontal, los colores se distribuyen de un lado al otro del elemento siguiendo el eje X.

<!-- Elemento visual para un gradiente horizontal -->
<div class="gradient-horizontal"></div>

Gradiente lineal hacia la derecha

Indicando explícitamente la dirección, el gradiente se orienta según el eje seleccionado. En este caso, la transición de color avanza de izquierda a derecha.

/* Gradiente orientado hacia la derecha */
.gradient-horizontal {
  width: 100%;
  height: 120px;
  background-image: linear-gradient(to right, red, yellow);
  /* 'to right' indica avance sobre el eje X positivo */
}

Gradiente lineal de izquierda a derecha en CSS — El rojo inicia a la izquierda y se transforma en amarillo hacia la derecha.

Introducción a los gradientes radiales

A diferencia de los gradientes lineales, los gradientes radiales distribuyen los colores desde un punto central hacia afuera, formando círculos o elipses concéntricas.

<!-- Contenedor para visualizar un gradiente radial -->
<div class="gradient-radial"></div>

html-css-online-course-responsive-web-design-from-scratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertosVer próximas fechas

Gradiente radial circular

El gradiente radial puede adoptar forma circular o elíptica. Al indicar circle, la transición de color se expande de manera uniforme desde el centro del elemento.

/* Gradiente radial con forma circular */
.gradient-radial {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, red, gold);
  /* El color rojo nace en el centro y se expande hacia afuera */
}

Gradiente radial circular aplicado en CSS — Los colores se distribuyen en círculos concéntricos.

Gradiente radial elíptico

Cuando el contenedor no es cuadrado o se define un tamaño específico, el gradiente radial adopta forma elíptica, permitiendo composiciones visuales más flexibles.

<!-- Elemento rectangular para gradiente elíptico -->
<div class="gradient-ellipse"></div>

Control del tamaño en gradientes radiales

CSS permite definir el tamaño exacto del gradiente radial. Esto brinda mayor control visual sobre cómo se distribuyen los colores dentro del elemento.

/* Gradiente radial elíptico con tamaño definido */
.gradient-ellipse {
  width: 300px;
  height: 180px;
  background-image: radial-gradient(ellipse 250px 100px, lightgreen, darkslateblue);
  /* Se especifica el ancho y alto de la elipse del gradiente */
}

Gradiente radial elíptico con tamaño personalizado — Definir dimensiones permite controlar la intensidad y alcance del color.

Qué son las transformaciones en CSS

Las transformaciones permiten modificar visualmente un elemento sin alterar el espacio que ocupa en el layout. Se utilizan para mover, escalar, rotar o simular profundidad, manteniendo intacto el flujo del documento.

<!-- Elemento base que será transformado con CSS -->
<div class="box">
  Elemento transformable
</div>

La propiedad `transform`

CSS aplica las transformaciones mediante la propiedad transform. Esta propiedad acepta distintas funciones que modifican el elemento visualmente sin reordenar los elementos vecinos.

/* Estilo base del elemento */
.box {
  width: 150px; /* Ancho visible */
  height: 150px; /* Alto visible */
  background-color: red; /* Color para identificar el elemento */
  transform: none; /* Estado inicial sin transformación */
}

Uso de la propiedad transform en CSS — transform centraliza todas las transformaciones visuales.

Preparando un elemento para moverlo

Para entender cómo se desplazan los elementos, primero se define una estructura HTML simple. El movimiento se realizará únicamente a nivel visual mediante transformaciones.

<!-- Caja que se moverá visualmente con translate -->
<div class="move-box"></div>

Curso de HTML y CSS para Frontend

`translate()`: mover elementos

La función translate() desplaza un elemento según los ejes X e Y. Recibe dos valores con unidades y permite mover visualmente el elemento sin modificar su posición original.

/* Desplazamiento visual del elemento */
.move-box {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: translate(10px, 20px);
  /* Primer valor: eje X (derecha/izquierda) */
  /* Segundo valor: eje Y (abajo/arriba) */
}

Elemento desplazado con transform translate — Valores positivos mueven derecha y abajo.

Elemento para rotación

Antes de rotar un elemento, se define una caja visible que permita apreciar claramente el giro. La rotación se realiza alrededor de su propio centro.

<!-- Elemento que será rotado -->
<div class="rotate-box"></div>

`rotate()`: girar elementos

La función rotate() permite girar un elemento según un ángulo en grados. Los valores positivos rotan en sentido horario y los negativos en sentido antihorario.

/* Rotación del elemento */
.rotate-box {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotate(360deg);
  /* deg representa grados de rotación */
}

Elemento rotado usando transform rotate — Un giro completo equivale a 360 grados.

Rotaciones en el eje X

Las transformaciones 3D permiten rotar elementos sobre ejes espaciales. rotateX() genera una rotación vertical que simula profundidad.

<!-- Caja para rotación sobre eje X -->
<div class="rotate-x"></div>

`rotateX()`: rotar en X

rotateX() gira el elemento sobre el eje horizontal. Este tipo de transformación se usa frecuentemente junto a perspectiva para reforzar el efecto tridimensional.

/* Rotación tridimensional en eje X */
.rotate-x {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateX(70deg);
  /* El ángulo define la intensidad del giro */
}

Rotación 3D sobre el eje X — El elemento parece inclinarse hacia adelante o atrás.

Rotaciones en el eje Y

rotateY() permite girar un elemento sobre el eje vertical. Este efecto genera una sensación de giro lateral, común en tarjetas o carruseles.

<!-- Elemento para rotación en eje Y -->
<div class="rotate-y"></div>

`rotateY()`: rotar en Y

Con rotateY() el elemento rota sobre el eje vertical. Es una transformación tridimensional que suele combinarse con animaciones para mejorar la experiencia visual.

/* Rotación en eje Y */
.rotate-y {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateY(70deg);
}

Rotación tridimensional sobre eje Y — Simula un giro lateral del elemento.

Rotaciones en el eje Z

rotateZ() rota el elemento sobre el eje perpendicular a la pantalla. Visualmente equivale a una rotación 2D tradicional.

<!-- Elemento para rotación en eje Z -->
<div class="rotate-z"></div>

`rotateZ()`: rotar en Z

rotateZ() permite girar un elemento como si se tratara de un plano. Es equivalente a rotate(), pero mantiene coherencia con transformaciones 3D.

/* Rotación en eje Z */
.rotate-z {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateZ(90deg);
}

Rotación en eje Z con CSS — El elemento gira como un plano frontal.

Preparando un elemento para escalar

Para analizar cómo funciona el escalado en CSS, primero definimos un elemento simple con dimensiones visibles. El cambio de tamaño se realizará únicamente a nivel visual, sin alterar el flujo del documento.

<!-- Caja base que será escalada -->
<div class="scale-box"></div>

`scale()`: escalar elementos

La función scale() permite aumentar o reducir el tamaño de un elemento. Puede recibir uno o dos valores que representan el factor de escala horizontal y vertical respectivamente.

/* Escalado del elemento */
.scale-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(2, 1);
  /* Primer valor: escala en eje X (ancho) */
  /* Segundo valor: escala en eje Y (alto) */
}

Elemento escalado horizontalmente con transform scale — Un valor mayor a 1 agranda, menor a 1 reduce.

Introducción al sesgado de elementos

El sesgado permite deformar visualmente un elemento inclinando sus lados. Esta transformación se utiliza para generar efectos dinámicos o estilizados sin modificar la estructura del layout.

<!-- Elemento base para aplicar skew -->
<div class="skew-box"></div>

`skew()`: deformar en ambos ejes

La función skew() inclina el elemento sobre los ejes X e Y. Recibe hasta dos valores en grados que determinan el nivel de deformación en cada eje.

/* Sesgado del elemento en ambos ejes */
.skew-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skew(20deg, 10deg);
  /* Primer valor: deformación en eje X */
  /* Segundo valor: deformación en eje Y */
}

Elemento deformado usando transform skew — Los ángulos determinan la inclinación del elemento.

Sesgado sobre un solo eje

CSS permite aplicar el sesgado de forma individual sobre cada eje. Esto brinda mayor control cuando se necesita una deformación direccional específica.

<!-- Elemento para sesgado individual -->
<div class="skew-x-box"></div>
<div class="skew-y-box"></div>

`skewX()` y `skewY()`

Las funciones skewX() y skewY() deforman el elemento en un solo eje. Se utilizan cuando se busca un efecto controlado sin alterar ambos sentidos.

/* Sesgado horizontal */
.skew-x-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewX(20deg);
}

/* Sesgado vertical */
.skew-y-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewY(20deg);
}

Ejemplo de skewX y skewY en CSS — Cada función actúa sobre un eje específico.

Ejemplo completo de sesgado

Para cerrar el concepto, retomamos un ejemplo simple que combina tamaño, color y sesgado. Esto permite visualizar claramente cómo actúa skewY sobre un elemento básico.

<!-- Caja roja para ejemplo final -->
<div class="final-box"></div>

Aplicando `skew` en un caso real

En este ejemplo final se observa cómo un elemento rectangular puede deformarse verticalmente usando skewY, manteniendo su posición original dentro del layout.

/* Estilo del ejemplo final */
.final-box {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.9);
  transform: skewY(25deg);
  /* El sesgado vertical inclina los laterales del elemento */
}

Elemento sesgado verticalmente con skewY — El sesgado modifica la forma sin mover el elemento.

Introducción a las transiciones

Las transiciones permiten suavizar los cambios de estilo en CSS. En lugar de aplicar un cambio inmediato, el navegador interpola los valores creando una animación simple y controlada.

<!-- Elemento base para aplicar transición -->
<div class="transition-box">
  Contenido
</div>

La propiedad `transition`

La propiedad transition indica qué estilo debe animarse y durante cuánto tiempo. Se activa cuando una propiedad cambia, por ejemplo al interactuar con el elemento mediante hover.

/* Estado inicial del elemento */
.transition-box {
  height: 100px;
  background-color: yellow;
  transition: height 2s;
  /* Se anima la propiedad height durante 2 segundos */
}

/* Estado al pasar el mouse */
.transition-box:hover {
  height: 200px;
}

Transición de altura aplicada con hover — El cambio de altura ocurre de forma progresiva.

Transición con múltiples propiedades

CSS permite animar más de una propiedad al mismo tiempo. Cada una puede tener su propia duración, lo que brinda mayor control sobre el comportamiento visual.

<!-- Elemento con cambios múltiples -->
<div class="multi-transition">
  Contenido
</div>

Animar varias propiedades

Al separar propiedades por coma, se definen distintas transiciones. Esto permite que cada cambio tenga una duración diferente según el efecto deseado.

/* Estado base */
.multi-transition {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: height 2s, width 1s;
}

/* Estado hover */
.multi-transition:hover {
  width: 200px;
  height: 200px;
}

Transición simultánea de ancho y alto — Cada propiedad puede animarse con su propio tiempo.

Aplicar transición a todos los cambios

Cuando no se especifica una propiedad concreta, la transición se aplica a cualquier estilo que varíe. Esto simplifica el código, pero debe usarse con criterio.

<!-- Elemento con transición global -->
<div class="all-transition">
  Contenido
</div>

transition aplicada a todas las propiedades

Usando solo un valor de tiempo, CSS interpreta que todas las propiedades animables deben transicionar con la misma duración.

/* Estado inicial */
.all-transition {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: 2s;
}

/* Estado hover */
.all-transition:hover {
  width: 200px;
  height: 200px;
  padding: 20px;
  background-color: cyan;
}

Varias propiedades animadas con transition global — Todos los cambios se animan en el mismo tiempo.

Transiciones sin `hover`

Las transiciones no dependen exclusivamente de hover. Cualquier pseudoclase que genere un cambio de estilo puede activar una transición, como focus en campos de formulario.

<!-- Campo de entrada para ejemplo con focus -->
<input type="text" placeholder="Escribí acá" />

Transiciones con `:focus`

Cuando un input recibe foco, sus estilos cambian. Si existe una transición definida, el navegador anima esos cambios de forma automática.

/* Estado base del input */
input {
  width: 100px;
  height: 40px;
  transition: all 2s;
}

/* Estado al recibir foco */
input:focus {
  width: 200px;
  font-size: 24px;
}

Transición activada por focus en input — El foco activa cambios animados.

Ejemplo integrado con `transform`

Las transiciones suelen combinarse con transformaciones. Esto permite animar rotaciones, escalados o sesgados de forma fluida al interactuar con el elemento.

<!-- Caja base para ejemplo final -->
<div class="combo-box"></div>

Transición aplicada a `transform`

En este ejemplo se observa cómo una transformación puede animarse suavemente gracias a transition. El elemento se deforma progresivamente al pasar el mouse.

/* Estado inicial */
.combo-box {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.9);
  border: solid 1px;
  transition: transform 1s;
}

/* Estado hover */
.combo-box:hover {
  padding: 20px;
  transform: skewY(25deg);
}

Transformación animada mediante transition — Transition suaviza el cambio de transform.

Introducción a las animaciones

Las animaciones en CSS permiten crear efectos que se ejecutan automáticamente y pueden repetirse en bucle. A diferencia de las transiciones, no dependen de un evento de interacción como hover.

¿Cómo funciona una animación?

Una animación está compuesta por dos partes fundamentales: una línea de tiempo que define los cambios y un elemento al cual se le aplica esa animación mediante propiedades CSS.

Línea de tiempo: `@keyframes`

La línea de tiempo se define con la regla @keyframes. Dentro de ella se especifican los momentos en los que el CSS cambia, usando porcentajes que representan el progreso de la animación.

Definiendo una animación

Dentro de @keyframes se indican los estilos que el elemento tendrá en distintos momentos. El navegador interpola los valores para generar un cambio progresivo.

/* Definición de la línea de tiempo */
@keyframes un_efecto {
  0% { width: 100px; }
  10% { width: 50px; }
  25% { width: 300px; }
  50% {
    width: 200px;
    background-color: red;
  }
  75% { width: 300px; }
  100% {
    width: 100px;
    background-color: green;
  }
}

Ejemplo de keyframes con porcentajes — Los cambios ocurren de forma gradual.

Aplicar una animación a un elemento

Una vez definida la línea de tiempo, se aplica al elemento usando propiedades animation. Allí se controla duración, repetición, retraso y función de aceleración.

/* Elemento animado */
section {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: un_efecto;
  animation-duration: 2s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

Aplicación de animación con propiedades — Las propiedades controlan el comportamiento.

Ejemplo base animado

En este ejemplo visual se observa un elemento que cambia sus propiedades de manera continua, demostrando cómo una animación se ejecuta en bucle sin interacción del usuario.

<!-- Elemento que se animará -->
<div class="animate"></div>

Animación combinada con `transform`

Las animaciones pueden modificar transformaciones como skew, rotate o scale. Esto permite crear efectos visuales complejos de forma fluida y controlada.

/* Definición de animación */
@keyframes animacion {
  from { }
  to {
    transform: skewY(25deg);
  }
}

/* Configuración inicial */
.animame {
  animation: animacion 1s linear 3s infinite alternate;
}

Animación aplicada a transform — Transform también puede animarse.

HTML del ejemplo animado

El HTML para una animación suele ser simple. El comportamiento dinámico se controla completamente desde CSS mediante keyframes y propiedades animation.

<!-- Caja base -->
<div></div>

<!-- Caja animada -->
<div class="animame"></div>

Animaciones aplicadas a texto

Las animaciones no se limitan a contenedores. También pueden aplicarse a texto, permitiendo efectos como aparición gradual, parpadeo o cambios de opacidad.

/* Texto animado */
h1 {
  animation-name: aparecer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes aparecer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Animación de opacidad en texto — El texto también puede animarse.

Lección anterior

Pseudoclases `CSS`

Domina las pseudoclases CSS para crear interfaces interactivas. Controla estados como hover, excluye elementos y selecciona por posición para un código más limpio y eficiente.

Comenzar Lección

Lección actual

Ejes, gradientes y transformaciones aplicadas a elementos CSS

Efectos visuales y movimiento con CSS

Aprende a manejar el espacio visual con ejes, aplicar gradientes, transformar y animar elementos. Crea interfaces modernas y dinámicas con efectos visuales profesionales en CSS.

Lección actual

Lección siguiente

Diseño de barra de navegación responsive mostrándose en laptop y celular con menú hamburguesa

Cómo crear un Navbar Responsive solo con `HTML` y `CSS`

Crea un menú de navegación responsive profesional con HTML y CSS. Aprende Flexbox, Media Queries y el truco del Checkbox Hack para móviles, sin una sola línea de JavaScript.

Comenzar Lección

¿Qué es el sistema de ejes X, Y y Z en CSS?V

Es el marco de referencia que usa el navegador para posicionar y transformar elementos. X controla el ancho horizontal, Y la altura vertical y Z simula profundidad visual mediante transformaciones.

¿Para qué sirve entender los ejes antes de usar gradientes o transformaciones?V

Permite predecir direcciones, movimientos y resultados visuales. Sin comprender los ejes, es común aplicar gradientes o transformaciones con efectos inesperados o difíciles de mantener.

¿Qué es un gradiente lineal en CSS?V

Es una transición progresiva entre colores aplicada al fondo de un elemento. Por defecto fluye de arriba hacia abajo, pero puede orientarse en cualquier dirección del eje X o Y.

¿Cuál es la dirección por defecto de un linear-gradient?V

Si no se indica dirección, el gradiente avanza desde la parte superior hacia la inferior del elemento, siguiendo el eje Y positivo del sistema de coordenadas del navegador.

¿Cómo funciona un gradiente lineal horizontal en CSS?V

Distribuye los colores de izquierda a derecha o viceversa siguiendo el eje X. Se controla indicando direcciones como to right o to left en la función linear-gradient.

¿Qué diferencia hay entre gradientes lineales y radiales?V

Los lineales avanzan en una dirección recta, mientras que los radiales parten desde un punto central y se expanden hacia afuera en forma circular o elíptica.

¿Qué es un gradiente radial circular?V

Es un gradiente que se expande uniformemente desde el centro formando círculos concéntricos. Se define usando la palabra clave circle dentro de radial-gradient.

¿Por qué un gradiente radial puede verse elíptico?V

La forma del contenedor influye directamente. Cuando el elemento no es cuadrado o se define un tamaño específico, el gradiente se adapta y adopta forma elíptica.

¿Para qué sirve controlar el tamaño de un gradiente radial?V

Permite definir hasta dónde se extienden los colores y con qué intensidad, logrando mayor control visual y composiciones más precisas dentro del fondo del elemento.

¿Qué son las transformaciones en CSS?V

Son modificaciones visuales que alteran la apariencia de un elemento sin afectar el layout. Permiten mover, rotar, escalar o deformar sin cambiar el flujo del documento.

Sistema de ejes en el espacio visual

Ejes X, Y y Z en CSS

Elemento base para aplicar gradientes

Gradiente lineal por defecto

Dirección horizontal del gradiente

Gradiente lineal hacia la derecha

Introducción a los gradientes radiales

Curso de HTML y CSS para Frontend

Gradiente radial circular

Gradiente radial elíptico

Control del tamaño en gradientes radiales

Qué son las transformaciones en CSS

La propiedad transform

Preparando un elemento para moverlo

Curso de HTML y CSS para Frontend

translate(): mover elementos

Elemento para rotación

rotate(): girar elementos

Rotaciones en el eje X

rotateX(): rotar en X

Rotaciones en el eje Y

rotateY(): rotar en Y

Rotaciones en el eje Z

rotateZ(): rotar en Z

Preparando un elemento para escalar

scale(): escalar elementos

Introducción al sesgado de elementos

skew(): deformar en ambos ejes

Sesgado sobre un solo eje

skewX() y skewY()

Ejemplo completo de sesgado

Aplicando skew en un caso real

Introducción a las transiciones

La propiedad transition

Transición con múltiples propiedades

Animar varias propiedades

Aplicar transición a todos los cambios

transition aplicada a todas las propiedades

Transiciones sin hover

Transiciones con :focus

Ejemplo integrado con transform

Transición aplicada a transform

Introducción a las animaciones

¿Cómo funciona una animación?

Línea de tiempo: @keyframes

Definiendo una animación

Aplicar una animación a un elemento

Ejemplo base animado

Animación combinada con transform

HTML del ejemplo animado

Animaciones aplicadas a texto

Lección anterior

Pseudoclases CSS

Lección actual

Efectos visuales y movimiento con CSS

Lección siguiente

Cómo crear un Navbar Responsive solo con HTML y CSS

La propiedad `transform`

`translate()`: mover elementos

`rotate()`: girar elementos

`rotateX()`: rotar en X

`rotateY()`: rotar en Y

`rotateZ()`: rotar en Z

`scale()`: escalar elementos

`skew()`: deformar en ambos ejes

`skewX()` y `skewY()`

Aplicando `skew` en un caso real

La propiedad `transition`

Transiciones sin `hover`

Transiciones con `:focus`

Ejemplo integrado con `transform`

Transición aplicada a `transform`

Línea de tiempo: `@keyframes`

Animación combinada con `transform`

Pseudoclases `CSS`

Cómo crear un Navbar Responsive solo con `HTML` y `CSS`