Animaciones con CSS
Activen las cámaras los que puedan y
pasemos asistencia
● Unidad 1: Flexbox.
Aplicar diseños responsivos ● Unidad 2: Grid.
haciendo uso de media
● Unidad 3: Media Queries.
queries y breakpoints.
● Unidad 4: Animaciones con CSS. Te encuentras aquí
Inicio Desarrollo Cierre
● Objetivo de la ● Conceptualización ● Reflexión
sesión ● Ejercitación
● Activación de
conceptos
Inicio
/* Crear transiciones con CSS */
/* Aplicar transformaciones con CSS. */
/* Crear animaciones con CSS. */
Objetivos
Activación de conceptos
Contesta la pregunta correctamente y gana un punto
Instrucciones:
● Se realizará una pregunta, el primero en escribir “YO” por
el chat, dará su respuesta al resto de la clase.
● El docente validará la respuesta.
● En caso de que no sea correcta, dará la oportunidad a la
segunda persona que dijo “Yo”.
● Cada estudiante podrá participar un máximo de 2 veces.
● Al final, el/la docente indicará el 1º, 2º y 3º lugar.
● Esta actividad no es calificada, es solo una dinámica
para recordar los conceptos clave para abordar esta
sesión.
Activación de conceptos
¿Qué son las media queries y cuál es su función
principal en el diseño web?
Activación de conceptos
¿Cuál es la sintaxis básica de una media
query?
Activación de conceptos
¿Cuáles son algunos ejemplos comunes de propiedades
CSS que se pueden modificar usando media queries?
Activación de conceptos
Primer lugar:
______________
Segundo lugar: Tercer lugar:
______________ ______________
Desarrollo
Efectos con CSS
¿Cómo se logra dar un efecto con CSS?
En CSS, tenemos 3 propiedades que nos
permiten dar efectos a un elemento:
● Transiciones (Transition).
● Transformaciones (Transform).
● Animaciones (Animation).
Transiciones en CSS
Creando una transición
Con la propiedad transition podemos crear efectos de transición suave entre dos estados de un
elemento. Veamos un ejemplo:
/* CSS */
<!-- EL HTML-->
button {
<body>
background-color: #0077FF;
<button> Pasa el cursor del
color: white;
mouse sobre el botón </button>
padding: 10px 20px;
</body> font-size: 16px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease-out;
}
button:hover {
background-color: rgb(255, 140, 0);
}
Transiciones en CSS
Conociendo las transiciones
● Para implementar transiciones /* CSS */
necesitamos un antes y un después. button {
background-color: #0077FF;
● Por ejemplo, un botón que sin hover color: white;
tiene propiedades con ciertos valores y padding: 10px 20px;
luego con hover, donde las propiedades font-size: 16px;
border: none;
tienen un valor distinto. border-radius: 5px;
transition: background-color 0.3s ease-out;
● La propiedad transition hará que el }
cambio sea gradual en la cantidad de
tiempo especificado. button:hover {
background-color: rgb(255, 140, 0);
}
Transiciones en CSS
Componentes del valor transition
Transiciones en CSS
Aplicando transición sobre todas las propiedades
La transición se puede aplicar al tamaño de una fuente, al tipo de fuente, bordes, margins,
paddings, cualquier otra propiedad típica de CSS, y también se puede aplicar a todos las
propiedades simultáneamente.
.box {
width: 100px; <div class="box"></div>
height: 100px;
background-color: blue;
transition: all 1s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
Transiciones en CSS
Aplicando transición sobre el ancho
.box { <div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
Pregunta
¿Cuál es la diferencia entre aplicar transition
a una única propiedad o aplicarlas a todas?
Transiciones en CSS
Cambiando la duración de la transición
.box { <div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s; Cambiemos 1s por 3s y
} observemos la diferencia
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
Transiciones en CSS
La función de tiempo
La función de tiempo permite controlar la curva de la velocidad de la transición.
Linear Ease (por defecto) Ease in Ease out
uniforme Lento al principio y Lento al Rápido al principio,
al final, rápido en la principio, rápido lento al final
mitad al final
Transiciones en CSS
Aplicando la función de tiempo ease
.box { <div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s ease;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
La función ease es por defecto.
Transiciones en CSS
Aplicando la función de tiempo linear
.box {
<div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s linear;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
Transiciones en CSS
Aplicando la función de tiempo steps
.box {
<div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s steps(5);
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
Transiciones en CSS
Tipos de funciones de tiempo
Función de tiempo Descripción
ease Inicia lentamente, luego acelera y luego desacelera hacia el final.
ease-in Inicia lentamente y luego acelera hacia el final.
ease-out Inicia rápidamente y luego desacelera hacia el final.
ease-in-out Inicia lentamente, luego acelera y luego desacelera hacia el final.
linear Avanza a una velocidad constante durante toda la transición.
step-start La transición comienza inmediatamente.
step-end La transición termina inmediatamente.
steps(n) Divide la transición en n pasos, donde n es un número entero. Cada paso tiene la misma duración y se completa al
mismo tiempo.
steps(n, start) Divide la transición en n pasos, donde n es un número entero. El valor start indica si cada paso comienza o termina
en el momento de la transición.
Ejercicio
En un archivo html nuevo debes crear un link:
Ejercicio
● Al hacer hover sobre él, se debe cambiar de color y ¡Manos al teclado!
cambiar la primera letra a mayúscula.
● Puedes utilizar text-transform: capitalize para
cambiar la primera letra a mayúscula.
● Experimenta con la función de tiempo hasta
encontrar un resultado que te guste.
● Retarda la transición 1 segundo.
/* Crear transiciones con CSS */
/* Aplicar transformaciones con CSS. */
/* Crear animaciones con CSS. */
Objetivos
Transformaciones
La propiedad transform
Las transformaciones en CSS se utilizan
para modificar las propiedades geométricas
de un elemento, como su tamaño, posición y
rotación, utilizando la propiedad transform.
Transformaciones
Ejemplo con transform
.box { <div class="box"></div>
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(45deg) scale(1.5);
}
Transformaciones
Transformaciones posibles
Transformación Descripción
translate() Mueve un elemento en la dirección y distancia especificada.
translateX() Mueve un elemento horizontalmente en la distancia especificada.
translateY() Mueve un elemento verticalmente en la distancia especificada.
scale() Escala un elemento en la cantidad especificada.
scaleX() Escala horizontalmente un elemento en la cantidad especificada.
scaleY() Escala verticalmente un elemento en la cantidad especificada.
rotate() Rota un elemento en el ángulo especificado.
skew() Sesga un elemento en los ángulos especificados.
skewX() Sesga horizontalmente un elemento en el ángulo especificado.
skewY() Sesga verticalmente un elemento en el ángulo especificado.
matrix() Combina varias transformaciones en una sola matriz.
Ejercicio
En un archivo html nuevo, debes crear dos cajas de
100px por 100px utilizando <div class="box"> y
Ejercicio
asignándole colores por CSS: ¡Manos al teclado!
● La primera caja debes rotarla 45 grados.
● La segunda caja debes rotarla 30 grados y luego
duplicar su tamaño ocupando scale.
● Agrega una transición a una de las cajas, el nuevo
tamaño solo debe aplicarse dentro de la
transición.
/* Crear transiciones con CSS */
/* Aplicar transformaciones con CSS. */
/* Crear animaciones con CSS. */
Objetivos
Animaciones
Introducción a Animaciones
● La propiedad "animation" permite crear
animaciones más avanzadas y
personalizadas mediante la definición de
keyframes.
● Los keyframes permiten definir los
valores intermedios de una animación en
diferentes momentos durante su
duración.
Animaciones
Introducción a Animaciones
Partamos con un ejemplo sencillo, una .box {
caja que cambia de color siempre sin width: 100px;
necesidad de hover. height: 100px;
animation-name: colorear;
animation-iteration-count:
infinite;
<div class="box"></div> animation-duration: 2s;
/* Se aplica la animación
"example" a la caja */
}
@keyframes colorear {
from {
background-color: #0079a1;
}
to {
background-color: orange;
}
}
Animaciones
Conceptos claves
● animation-name: El nombre de la animación.
● animation-iteration-count: La cantidad de veces que correrá la animación antes de
detenerse, también se puede utilizar infinite para un número infinito de veces.
● @keyframes: Son los momentos claves de la animación, aquí es donde definimos lo
que sucede en cada paso de la animación, utilizamos los keywords from y to para
definir el primer y el último paso respectivamente.
.container {
width: 100%;
Animaciones
display: flex; Ejemplo con texto
justify-content: center;
align-items: center;
}
.text {
font-size: 3em; <div class="container">
animation: move 2s infinite; <h1 class="text">¡Hola,
} mundo!</h1>
@keyframes move { </div>
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
.container {
width: 100%;
Animaciones
display: flex; Dirección de la animación
justify-content: center;
align-items: center;
} <div class="container">
<h1 class="text">¡Hola,
.text { mundo!</h1>
font-size: 3em;
</div>
animation: move 2s infinite;
animation-direction: alternate;
}
La propiedad animation-direction
@keyframes move { nos permite hacer una animación
from { reversible y de esta forma lograr
transform: translateX(0); una animación más fluida de forma
} sencilla.
to {
transform: translateX(200px);
}
}
.container {
width: 100%;
height: 100vh;
Animaciones
Una animación de múltiples etapas
display: flex;
@keyframes move {
justify-content: center; 0% {
align-items: center; transform: translateX(0);
}
} <div class="container">
25% {
transform: translateX(100px); <h1
} class="text">¡Hola,
.text {
50% { mundo!</h1>
position: absolute;
transform: translateX(0); </div>
font-size: 48px; transform: rotate(180deg)
animation: move 4s ease ;
infinite; } 75% {
transform:
} translateX(-100px);
}
100% {
transform: translateX(0);
}
}
Ejercicio
En un archivo html nuevo, debes crear una caja de
100px por 100px:
Ejercicio
¡Manos al teclado!
● Utilizando keyframes en el instante cero cambia
su color a verde.
● En el 50 cambia el color a rojo.
● En el 100 cambia el color azul.
● Haz la animación reversible.
/* Crear transiciones con CSS */
/* Aplicar transformaciones con CSS. */
/* Crear animaciones con CSS. */
Objetivos
Cierre
¿Existe algún concepto que no
hayas comprendido? Reflexionemos
● Revisar la guía que trabajarán de forma autónoma.
● Revisar en conjunto la prueba.
¿Qué sigue?
www.desafiolatam.com
/DesafioLatam /DesafioLatam /DesafioLatam /DesafioLatam 44
