DEV Community

Fernando
Fernando

Posted on

Animaciones y transiciones

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, ...);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 1 

.background {
  background: linear-gradient(to right, red, blue);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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,
  ...
);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>...;
Enter fullscreen mode Exit fullscreen mode

Ejemplo general 

transform: translateX(100px) rotate(45deg) scale(1.5);
Enter fullscreen mode Exit fullscreen mode

Transform translate

Requiere dos números y su unidad, separados por una coma:

Estructura 

transform: translate(tx, ty, tz);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode 
.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);
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode 
/* rotate */
.rotate:hover {
  transform: rotate(45deg);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 2 

<div class="container-item">
    <div class="item rotateX">RotateX</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
/* rotateX */
.rotateX:hover {
  transform: rotateX(180deg);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 3 

 <div class="container-item">
    <div class="item rotateY">RotateY</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
/* rotateY */
.rotateY:hover {
  transform: rotateY(180deg);
}
Enter fullscreen mode Exit fullscreen mode

Transform Scale

transform:scale( ), cambia la escala del objeto (como si fuese un zoom).

Estructura 

transform: scale(sx, sy, sz);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
/* scale */
.scale:hover {
  transform: scale(1.2);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 2 

  <div class="container-item">
    <div class="item scaleX">ScaleX</div>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.scaleX:hover {
  transform: scaleX(1.2);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 3 

   <div class="container-item">
      <div class="item scaleY">ScaleY</div>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.scaleY:hover {
  transform: scaleY(1.2);
}
Enter fullscreen mode Exit fullscreen mode

Transform Skew

transform:skew( ) nos permite sesgar (torcer, deformar) objetos en CSS

Estructura 

transform: skew(ax, ay);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
/* skew */
.skew:hover {
  transform: skew(20deg, 10deg);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 2 

    <div class="container-item">
      <div class="item skewX">SkewX</div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
.skewX:hover {
  transform: skewX(20deg);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 3 

  <div class="container-item">
      <div class="item skewY">SkewY</div>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.skewY:hover {
  transform: skewY(20deg);
}
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
/* 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);
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 2 

<!-- Cambio de tamaño -->


 <div class="box2"></div>
Enter fullscreen mode Exit fullscreen mode 
/* 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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
/* 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);
}
Enter fullscreen mode Exit fullscreen mode

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) */
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo 1 


  <div class="container-chicle">
    <p class="chicle">Texto de prueba</p>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mjoycemilburn profile image

NgSysV2-4.1: The Age of AI - Meet your Digital Tutor

MartinJ -

genedesign profile image

Behind Fuji X Studio: Lessons in Web development, AI, Design and Accessibility

Evgeny Khoroshilov -

estotriramdani profile image

Don't Just Copy and Paste Code, Make It Reusable

Esto Triramdani N -

jacobandrewsky profile image

Build your new Storefront with Nuxt and Medusa 2.0.0

Jakub Andrzejewski -