Animaciones y transiciones
Ejes
X:Se refiere a la posición horizontal, de izquierda a derecha.
Y:Se refiere a la posición vertical, de arriba a abajo.
Z:Se refiere a la posición hacia delante o atrás
Gradientes
es una transicion suave entre dos o mas colores.
Linear gradient:
El gradiente lineal va avanzando linea a linea,
Estructura
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: Especifica la dirección del gradiente. Puede ser un ángulo (por ejemplo, 45deg) o palabras clave como to right, to left, to bottom, etc.
color-stop: Son los colores por los cuales el gradiente pasa. Puede incluir múltiples colores.
Ejemplo base
HTML
<header>
<div class="hero-image">
<h1>
Clase 14 <br />
Animaciones y Transiciones
</h1>
<button class="hero-button">Click Me</button>
</div>
</header>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
}
.hero-image {
background: linear-gradient(to right, #6a82fb, #fc5c7d);
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
h1 {
font-size: 3em;
margin: 0;
padding: 0 20px;
}
.hero-button {
margin-top: 20px;
padding: 15px 30px;
font-size: 1.2em;
color: white;
background-color: #fc5c7d;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-button:hover {
background-color: #fd6584;
transform: scale(1.1);
}
Ejemplo 1
.background {
background: linear-gradient(to right, red, blue);
}
Este ejemplo crea un gradiente que va de rojo a azul, de izquierda a derecha.
Ejemplo 2
.background {
background: linear-gradient(to bottom, red, yellow, green);
}
Este ejemplo crea un gradiente que va de rojo a amarillo a verde, de arriba a abajo.
Ejemplo 3
.background {
background: linear-gradient(45deg, red, blue);
}
Este ejemplo crea un gradiente que va de rojo a azul en un ángulo de 45 grados.
Radial gradient:
Un gradiente radial es una transición suave de colores que se irradia desde un punto central hacia afuera en forma de círculo o elipse. A diferencia de los gradientes lineales que cambian de color a lo largo de una línea, los gradientes radiales cambian de color en círculos concéntricos alrededor de un centro.
Estructura
background: radial-gradient(
shape size at position,
color-stop1,
color-stop2,
...
);
shape: Define la forma del gradiente, puede ser circle (círculo) o ellipse (elipse).
size: Especifica el tamaño del gradiente, puede ser closest-side, closest-corner, farthest-side, farthest-corner, etc.
position: Define la posición del centro del gradiente. Por defecto es center.
color-stop: Los colores por los cuales el gradiente pasa. Puede incluir múltiples colores.
Ejemplo 1
.background {
background: radial-gradient(circle, red, blue);
}
Este ejemplo crea un gradiente radial en forma de círculo que va de rojo a azul.
Ejemplo 2
.background {
background: radial-gradient(circle, red, yellow, green);
}
Este ejemplo crea un gradiente radial en forma de círculo que va de rojo a amarillo a verde.
Ejemplo 3
.background {
background: radial-gradient(ellipse, 250px, 100px red, blue);
}
Este ejemplo crea un gradiente radial en forma de elipse que va de rojo a azul. podemos tambien especificar su tamaño
Transform
Una transformación es una modificación de la forma en que se muestra un elemento. Todo elemento transformado por CSS cambia la forma en que se ve, pero no el lugar que ocupa. Los efectos que se pueden lograr son:
- translate(): Mueve el elemento en el plano 2D o 3D.
- rotate(): Rota el elemento alrededor de un punto específico.
- scale(): Escala el elemento en el plano 2D o 3D.
- skew(): Inclina el elemento a lo largo de los ejes X e Y.
- matrix(): Define una matriz 2D de transformación general.
transform: <transform-function>...;
Ejemplo general
transform: translateX(100px) rotate(45deg) scale(1.5);
Transform translate
Requiere dos números y su unidad, separados por una coma:
Estructura
transform: translate(tx, ty, tz);
- El primero es el desplazamiento horizontal (eje X).
- El segundo es el desplazamiento vertical (eje Y).
- Valores positivos: mueven el elemento a la derecha/abajo.
- Valores negativos: mueven el elemento a la izquierda/arriba.
- También existen translateX() y translateY(), cada uno sólo recibe un número con su unidad.
Ejemplo base
<section>
<h2 class="title-translate">Transformaciones</h2>
<div class="container">
<div class="container-item">
<!-- translate -->
<div class="item translate">Translate</div>
</div>
</div>
</section>
.title {
text-align: center;
margin-top: 70px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
max-width: 1200px;
justify-content: center;
align-items: center;
margin: auto;
margin-bottom: 70px;
}
.container-item {
width: 300px;
height: 300px;
justify-self: center;
border: 1px solid grey;
background-color: aliceblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
margin: 30px;
}
.item {
width: 100%;
height: 100%;
background-color: #6a82fb;
display: flex;
justify-content: center;
align-items: center;
color: white;
gap: 20px;
}
/* translate */
.translate:hover {
transform: translate(10px, 20px);
}
Transform Rotate
La rotación permite girar un objeto sin deformarlo. Se hace con el transform: rotate( ).
Recibe entre paréntesis un número, que representa la cantidad de grados a girar el objeto:
Estructura
transform: rotate(angle);
- Si es positivo, rota hacia la derecha (en sentido horario).
- Si es negativo, rota hacia la izquierda (sentido antihorario).
Por tratarse de grados, la unidad que acompaña el número será deg (degrees).
Ejemplo 1
<div class="container-item">
<div class="item rotate">Rotate</div>
</div>
/* rotate */
.rotate:hover {
transform: rotate(45deg);
}
Ejemplo 2
<div class="container-item">
<div class="item rotateX">RotateX</div>
</div>
/* rotateX */
.rotateX:hover {
transform: rotateX(180deg);
}
Ejemplo 3
<div class="container-item">
<div class="item rotateY">RotateY</div>
</div>
/* rotateY */
.rotateY:hover {
transform: rotateY(180deg);
}
Transform Scale
transform:scale( ), cambia la escala del objeto (como si fuese un zoom).
Estructura
transform: scale(sx, sy, sz);
Requiere dos números separados por coma:
- El primero es el ancho (Escala en eje X).
- El segundo es el alto (Escala en eje Y).
- Valores mayores a 1, agrandan.
- Valores entre 1 y 0, achican.
- Valores negativos, escalan dado vuelta.
- Si solo se quiere cambiar un eje, existen scaleX() y scaleY(),
- cada uno sólo recibe un número.
Ejemplo 1
<div class="container-item">
<div class="item scale">Scale</div>
</div>
/* scale */
.scale:hover {
transform: scale(1.2);
}
Ejemplo 2
<div class="container-item">
<div class="item scaleX">ScaleX</div>
</div>
.scaleX:hover {
transform: scaleX(1.2);
}
Ejemplo 3
<div class="container-item">
<div class="item scaleY">ScaleY</div>
</div>
.scaleY:hover {
transform: scaleY(1.2);
}
Transform Skew
transform:skew( ) nos permite sesgar (torcer, deformar) objetos en CSS
Estructura
transform: skew(ax, ay);
Puede tener hasta dos números separados por coma:
Sus parámetros son los ángulos de deformación en grados sexagesimales (deg).
El primero indica el eje “X”.
El segundo indica el eje “Y”.
Ejemplo 1
<div class="container-item">
<div class="item skew">SkewX</div>
</div>
/* skew */
.skew:hover {
transform: skew(20deg, 10deg);
}
Ejemplo 2
<div class="container-item">
<div class="item skewX">SkewX</div>
</div>
.skewX:hover {
transform: skewX(20deg);
}
Ejemplo 3
<div class="container-item">
<div class="item skewY">SkewY</div>
</div>
.skewY:hover {
transform: skewY(20deg);
}
Transiciones
Con la propiedad transition, es posible lograr que al pasar el mouse por el elemento, el mismo “haga una animación”.
Recuerda que para los enlaces se utiliza a:hover, con el fin de que cambien sus estilos al pasar el mouse por encima. Esta pseudoclase se puede utilizar con cualquier elemento sobre el cual quisieras ejecutar una transición: un div, span, párrafo, etc.
Estructura
transition: <property> <duration> <timing-function> <delay>;
Propiedades principales de las transiciones:
- transition-property: Especifica la propiedad CSS a la que se aplicará la - transición.
- transition-duration: Define cuánto tiempo debe durar la transición.
-
transition-timing-function: Describe cómo debe progresar la
transición (por ejemplo, de manera lineal, rápida al principio, etc.).- linear: La transición se produce a una velocidad constante.
- ease: La transición empieza lentamente, se acelera en el medio y luego desacelera al final.
- ease-in: La transición comienza lentamente y luego acelera.
- ease-out: La transición comienza rápidamente y luego desacelera.
- ease-in-out: La transición comienza lentamente, se acelera en el medio y luego desacelera al final.
- step-start: La transición salta instantáneamente al valor final al comienzo.
- step-end: La transición se mantiene en el valor inicial hasta el final, cuando salta instantáneamente al valor final.
- steps(int, start|end): Divide la transición en un número fijo de intervalos o pasos. int es el número de pasos y start o end especifican si el cambio ocurre al comienzo o al final de cada intervalo.
transition-delay: Especifica un retraso antes de que comience la transición.
Ejemplo1
<!-- Cambio de color de fondo -->
<div class="box1"></div>
/* Cambio de color */
.box1 {
width: 100px;
height: 100px;
background-color: rgb(106, 13, 134);
transition: background-color 0.5s ease-in-out;
margin: auto;
}
.box1:hover {
background-color: rgb(184, 42, 177);
}
Ejemplo 2
<!-- Cambio de tamaño -->
<div class="box2"></div>
/* Cambio de tamaño */
.box2 {
width: 100px;
height: 100px;
background-color: rgb(155, 18, 86);
transition: width 1s, height 1s;
margin: 70px auto;
}
.box2:hover {
width: 200px;
height: 200px;
}
En este ejemplo, al pasar el ratón sobre el div con clase box,
su tamaño cambiará de 100px a 200px en ambos sentidos (ancho y alto)
en 1 segundo.
Ejemplo 3
<!-- Desplazamiento con manipulación de los tiempos -->
<div class="box3"></div>
/* Desplazamiento con manipulación de los tiempos*/
.box3 {
width: 100px;
height: 100px;
background-color: orange;
transition: transform 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
margin: 70px auto;
}
.box3:hover {
transform: translateX(200px);
}
En este ejemplo, se utiliza la función de tiempo cubic-bezier
para crear una transición personalizada. Al pasar el ratón
sobre el div con clase box, este se moverá 200px a la derecha
en 1 segundo siguiendo la curva de la función cubic-bezier.
cubic-bezier es una función que te permite definir una curva
de tiempo personalizada para la transición. Esta función acepta
cuatro valores numéricos que representan los puntos de control de
una curva de Bezier cúbica. Estos puntos de control determinan
cómo varía la velocidad de la transición a lo largo del tiempo.
Punto de control P1 (x1, y1):
x1: Controla la posición horizontal del primer punto de control.
y1: Controla la posición vertical del primer punto de control.
Punto de control P2 (x2, y2):
x2: Controla la posición horizontal del segundo punto de control.
y2: Controla la posición vertical del segundo punto de control.
Funcionamiento de los puntos de control:
Valores de x (horizontal): Determinan cómo varía la aceleración
o desaceleración de la transición a lo largo del tiempo.
Un valor bajo de x (cerca de 0) indica una aceleración inicial rápida.
Un valor alto de x (cerca de 1) indica una aceleración o
desaceleración más suave.
Valores de y (vertical): Afectan la tasa de cambio de velocidad
durante la transición.
Un valor bajo de y (cerca de 0) indica una transición más lineal o uniforme.
Un valor alto de y (cerca de 1) indica cambios bruscos en la velocidad,
como una aceleración inicial seguida de una desaceleración rápida,
o viceversa.
Estos valores determinan cómo se comporta la aceleración
y desaceleración de la transición transform durante 1 segundo
Animaciones
A diferencia de la transición, una animación es un efecto que se repite en bucle (en loop) tantas veces como se quiera.
No depende del cambio de estado (el elemento se animará desde la carga de la web).
Es la unión de dos partes: por un lado, una línea de tiempo (llamada keyframe) con la información de los cambios; por otro, aplicar ese keyframe a un elemento que será el que se verá animado.
Estructura de una Animación en CSS
1. Definición de @keyframes
La regla @keyframes especifica cómo cambia un elemento durante una animación a lo largo del tiempo. Puedes definir varios pasos (keyframes) que describen los estilos que el elemento debe tener en puntos específicos durante la animación.
@keyframes nombreAnimacion {
0% {
/* Estilos al inicio de la animación (0% del tiempo) */
}
50% {
/* Estilos a la mitad de la animación (50% del tiempo) */
}
100% {
/* Estilos al final de la animación (100% del tiempo) */
}
}
nombreAnimacion: Es el nombre que le das a la animación. Puedes usar este nombre más tarde para aplicar la animación a un elemento.
Porcentajes (0%, 50%, 100%, etc.): Representan el progreso de la animación en relación con su duración total. Puedes definir estilos para cualquier porcentaje entre 0% y 100%, y CSS interpolara automáticamente los estilos entre estos puntos.
2. Aplicación de la Animación
/* Aplicación de la animación a un elemento */
.elemento {
width: 100px;
height: 100px;
background-color: red;
animation: mover 3s ease-in-out infinite;
}
Una vez definida la animación con @keyframes, la aplicas a un elemento utilizando la propiedad animation.
nombreAnimacion: Es el nombre de la animación definida con @keyframes.
2s: Especifica la duración de la animación (en este caso, 2 segundos).
ease-in-out: Especifica la función de temporización de la animación, que determina cómo cambia la velocidad de la animación a lo largo del tiempo. Puedes usar valores como linear, ease, ease-in, ease-out, ease-in-out, o una función personalizada cubic-bezier.
infinite: Indica que la animación se repetirá indefinidamente. Puedes usar un número específico de repeticiones (3, 5, etc.) en lugar de infinite si deseas que la animación se repita un número determinado de veces.
Estructura general
animation: <nombre> <duración> <función-de-temporización> <retraso>
<iteraciones> <dirección> <modo-de-llenado> <estado-de-reproducción>;
nombre: Especifica el nombre de la animación (@keyframes) que se aplicará.
duración: Define cuánto tiempo durará la animación. Puede ser especificada en segundos (s) o milisegundos (ms).
función-de-temporización: Indica cómo se interpolarán los valores durante la animación. Puedes utilizar funciones predefinidas (ease, linear, ease-in, ease-out, ease-in-out) o una función personalizada (cubic-bezier(x1, y1, x2, y2)).
retraso: Opcional. Define cuánto tiempo esperará la animación antes de comenzar a ejecutarse. Puede ser especificado en segundos (s) o milisegundos (ms).
iteraciones: Opcional. Indica cuántas veces se repetirá la animación. Puedes usar valores como infinite para repetición continua o un número específico para un número finito de repeticiones.
dirección: Opcional. Define la dirección en la que se ejecutará la animación (normal, reverse, alternate, alternate-reverse).
modo-de-llenado: Opcional. Especifica qué estilos deben aplicarse antes y después de la ejecución de la animación (forwards, backwards, both, none).
estado-de-reproducción: Opcional. Define si la animación está en ejecución (running) o pausada (paused).
Ejemplo Basico Completo
HTML
<div class="elemento"></div>
CSS
/* Definición de la animación */
@keyframes mover {
0% {
transform: translateX(0); /* Estado inicial */
}
50% {
transform: translateX(100px); /* Estado a la mitad de la animación */
background-color: blue; /* Cambio de color a la mitad */
}
100% {
transform: translateX(200px); /* Estado final */
background-color: green; /* Cambio de color al final */
}
}
.elemento {
width: 100px;
height: 100px;
background-color: red;
animation: mover 3s ease-in-out infinite;
}
Ejemplo 1
<div class="container-chicle">
<p class="chicle">Texto de prueba</p>
</div>
.container-chicle {
width: 500px;
margin: auto;
}
.chicle {
font-family: Arial;
font-size: 50px;
text-align: center;
margin: 50px;
}
/* Asignamos la animación mediante pseudoclases cuando
haya una interacción del usuario */
.chicle:hover {
animation: 1s chicle 1;
}
/* Creamos la animación (con keyframes) */
@keyframes chicle {
30% {
transform: scaleX(1.2) scaleY(0.7);
}
40% {
transform: scaleX(0.7) scaleY(1.2);
}
60% {
transform: scaleX(1.1) scaleY(0.8);
}
}
Top comments (0)