Sesión 13 – Transiciones y transformaciones CSS

1

Transiciones CSSAnimar cambios de propiedades de forma suave

Las transiciones permiten animar el cambio de una propiedad CSS de forma suave, en lugar de que sea instantáneo.

/* Sintaxis: propiedad duración función-temporal retraso */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #45a049;
}

Propiedad	Descripción	Valores
transition-property	Qué propiedad se anima	all, background-color, transform, etc.
transition-duration	Cuánto dura la animación	0.3s, 500ms
transition-timing-function	Curva de aceleración	ease, linear, ease-in, ease-out, ease-in-out
transition-delay	Retraso antes de empezar	0s, 0.2s

Transición múltiple

.link {
    color: #333;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.link:hover {
    color: #4CAF50;
    border-bottom-color: #4CAF50;
}

2

Transformaciones CSSModificar la apariencia visual sin afectar el flujo

/* Escalar (agrandar/reducir) */
img.zoom:hover { transform: scale(1.1); }

/* Rotar */
.icono:hover { transform: rotate(15deg); }

/* Trasladar (mover) */
.card:hover { transform: translateY(-5px); }

/* Inclinar */
.banner { transform: skewX(-5deg); }

/* Combinar transformaciones */
.button-3d:hover { transform: scale(1.05) translateY(-3px); }

3

Ejemplos prácticosTarjetas, botones, zoom e iconos animados

Tarjeta animada

.card {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

Zoom de imagen

.image-container {
    overflow: hidden;       /* Oculta la parte que se sale */
    border-radius: 8px;
}

.image-container img {
    width: 100%;
    transition: transform 0.4s ease;
}

.image-container img:hover {
    transform: scale(1.15);
}

Botón con múltiples efectos

.btn-animated {
    display: inline-block;
    padding: 12px 30px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-animated:hover {
    background-color: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-animated:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

Rotación en iconos

.social-icon {
    display: inline-block;
    font-size: 24px;
    color: #333;
    margin: 0 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: #3498db;
    transform: rotate(360deg) scale(1.2);
}

4

Playground de transicionesAjusta los valores y observa el efecto en tiempo real

Controles

Duración (s):

0.5s

Scale:

1.2

Rotate (deg):

0°

TranslateY (px):

-10px

Timing function:

Hover me

Duración: 0.5s

Scale: 1.2

Rotate: 0°

TranslateY: -10px

5

Ejercicio prácticoAplica transiciones y transformaciones a tu proyecto

Tareas de la sesión

Añade una transición suave de color al pasar el ratón sobre los botones de tu formulario.
Crea un efecto de zoom en las imágenes dentro de un contenedor con overflow: hidden.
Haz que las tarjetas (.card) se eleven ligeramente al pasar el ratón (translateY(-5px)) con una sombra más intensa.
Crea un botón con bordes redondeados que cambie de color de fondo y se mueva hacia arriba al hacer hover.
Experimenta con transform: rotate() en algún elemento decorativo.
Crea un menú de navegación donde los enlaces tengan una animación de borde inferior al pasar el ratón (de transparente a un color visible).
Combina varias transformaciones en un mismo hover (por ejemplo, scale + translateY).