Taller de Programación Web
Sesión N° 07:
Efectos Visuales en CSS:
Transiciones, Transformaciones y
Animaciones
Dudas de la
clase anterior:
Conocimiento previo:
• ¿Han visto en páginas web botones que cambian al
pasar el mouse?
• ¿Han notado efectos como textos que giran o
imágenes que crecen?
• ¿Saben que esos efectos se pueden lograr solo con
CSS?
Utilidad del tema:
• Captar la atención del usuario con efectos
visuales atractivos.
• Aplicar efectos sin necesidad de JavaScript.
• Hacer que los sitios luzcan modernos y
profesionales.
• Mejorar la experiencia del usuario sin afectar el
rendimiento.
Logro de aprendizaje
El estudiante será capaz de aplicar correctamente
transiciones, transformaciones y animaciones
usando CSS, para agregar dinamismo visual a sus
páginas web.
Transiciones CSS
Permiten que el cambio de una propiedad suceda de
forma suave y progresiva.“
Propiedades
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
Ejemplo: Dentro de head
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
/* Aqui esta la transicion */
transition: background-color 0.5s ease;
font-size: 16px;
cursor: pointer;
}
Dentro del body
<button>Haz clic aquí</button>
Que ocurre
Al pasar el cursor
Que podemos ver
transition: background-color 0.5s ease;
Esta línea es una forma abreviada
(shorthand) de escribir varias propiedades de
transición.
Que podemos ver
Propiedad Valor
transition-property background-color (la propiedad que cambiará)
transition-duration 0.5s (duración de la transición)
transition-timing-function ease (forma del cambio: lento → rápido → lento)
transition-delay (no está definida, por lo tanto es 0s por defecto)
¿TE DISTE
CUENTA DE
ALGO?
Tu línea de código
equivale
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
¿Qué pasa si uso solo una o varias
propiedades de transición?
Propiedad usada ¿Funciona la transición? ¿Qué sucede? Recomendación
No hay duración, así que no se
✅ transition-property sola ❌ No Se necesita al menos duration
aplica nada
✅ transition-duration sola ❌ No No sabe qué propiedad animar Se necesita property
✅ transition-timing-function Sin property ni duration, no hay
❌ No No usarla sola
sola efecto
Esperaría... pero no tiene
✅ transition-delay sola ❌ No Requiere al menos duration
animación que ejecutar
Transición básica (funciona
✅ property + duration ✅ Sí Ideal para empezar
correctamente)
✅ property + duration + timing- Transición más controlada (forma
✅ Sí Recomendado
function del movimiento)
✅ property + duration + delay ✅ Sí Empieza con retraso Ideal para efectos con espera
✅ Las 4 propiedades ✅ Sí Transición completa y profesional Mejor práctica avanzada
Ejemplo mínimo funcional
transition: background-color 0.5s;
Ejemplo Completo
transition: background-color 0.5s ease-in-out 0.2s;
Transformaciones CSS
Permiten modificar visualmente un elemento (girar,
escalar, mover, inclinar).
Propiedades
•transform: scale()
•transform: rotate()
•transform: translateX() / translateY()
•transform: skew()
Dentro de head
img:hover {
transform: scale(1.1);
transition: transform 0.3s;
}
Dentro de html
<img src="gatito.png" alt="Imagen de prueba">
Que ocurre
Al pasar el cursor
Animaciones CSS
Permiten definir un movimiento continuo o progresivo
en el tiempo mediante @keyframes.
Propiedades
•animation-name
•animation-duration
•animation-iteration-count
•animation-delay
•animation-direction
•animation-timing-function
Dentro de head
@keyframes flotar {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.flotando {
animation: flotar 2s infinite ease-in-out;
}
Dentro de body
<div class="flotando">¡Hola!</div>
Dentro de body
VERIFICAMOS LOS 15
EJERCICIOS RESUELTOS EN
SEMANA 7
EJERCICIO PARA
DESARROLLAR EN CLASE
EJERCICIO 1
Botón interactivo completo
Objetivo: Crear un botón que cambie de color, se agrande
y muestre sombra suave al pasar el mouse.
Requisitos:
•background-color, transform: scale(), box-shadow
•Usar transition: all 0.5s ease;
•Estilo visual atractivo (bordes redondeados y fuente
moderna)
EJERCICIO 2
Tarjeta de producto con efecto
Objetivo: Crear una “tarjeta de producto” que:
•Muestre una imagen
•Al pasar el mouse:
•Se eleve (box-shadow)
•Se agrande ligeramente (scale)
•El nombre del producto cambie de color
Bonus: Agrega un :hover en el nombre con transition-delay.
EJERCICIO 3
Galería de imágenes con opacidad
Objetivo: Mostrar 4 imágenes alineadas en una fila. Al pasar el
mouse sobre cada una:
•Se atenúe ligeramente (opacity)
•Se agrande sutilmente (scale)
•Debe usar transition combinada
EJERCICIO 4
Panel de información emergente
Objetivo: Crear una caja oculta (opacity: 0) que aparezca con
transición suave (opacity: 1, translateY) al pasar el mouse por un
título o ícono.
Claves:
•Simular un “tooltip” o panel informativo con transition
•Usar :hover en el contenedor padre para mostrar el contenido
EJERCICIO 5
Menú lateral con transición
Objetivo: Simular un menú que aparece desde la izquierda
al pasar el mouse por un botón o área.
Requisitos:
•transform: translateX(-100%) en estado inicial
•transform: translateX(0) en :hover
•transition: transform 0.4s ease-out;
EJERCICIO 6
Banner animado tipo marquesina
Objetivo:
Diseñar un banner horizontal que muestre un mensaje animado
que se desplace constantemente de derecha a izquierda.
Requisitos:
•Utilizar @keyframes para animar el texto.
•El texto debe recorrer todo el ancho del banner.
•El efecto debe repetirse de manera continua e infinita.
•Opcional: usar colores contrastantes y tipografía destacada para
llamar la atención.
CIERRE DE LA CLASE
• Entendimos la diferencia entre transiciones,
transformaciones y animaciones.
• Aplicamos efectos modernos para mejorar la
experiencia visual.
• Usamos hover para activar transformaciones.
• Construimos animaciones con @keyframes
desde cero.
Resolución
de dudas:
GRACIAS
