Conferencia 7: Transiciones y animaciones CSS

En esta conferencia, exploraremos cómo darle vida a sus páginas web utilizando transiciones y animaciones CSS. Estas técnicas le permiten crear efectos fluidos y atractivos que mejoran la experiencia del usuario sin necesidad de JavaScript.

Introducción a las transiciones CSS

Las transiciones CSS le permiten cambiar suavemente los valores de las propiedades durante un período específico. Son ideales para crear efectos de desplazamiento, animaciones de botones y otros elementos interactivos.

1. Sintaxis básica

Para crear una transición, debe especificar la propiedad CSS para la transición, la duración y las funciones de aceleración opcionales.

• Ejemplo:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

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

En este ejemplo, el color de fondo del botón cambia suavemente durante 0,3 segundos cuando se coloca el cursor sobre él.

2. Transición de varias propiedades

Puedes realizar la transición de varias propiedades a la vez separándolas con comas.

• Ejemplo:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

Este ejemplo cambia suavemente el ancho, el alto y el color de fondo del cuadro al pasar el mouse.

3. Funciones de facilitación

Las funciones de aceleración controlan la velocidad de la transición en diferentes puntos, creando efectos como entrada, salida o ambos.

• Funciones de flexibilización comunes:
  • facilidad: comienza lentamente, luego acelera y luego desacelera nuevamente.
  • lineal: Mantiene una velocidad constante.
  • Entrada fácil: comienza lentamente y luego se acelera.
  • facilidad de salida: comienza rápidamente y luego se ralentiza.

Introducción a las animaciones CSS

Las animaciones CSS te permiten crear secuencias de cambios más complejas a lo largo del tiempo, más allá de simples transiciones. Puedes animar múltiples propiedades, controlar el tiempo y crear fotogramas clave para un mayor control.

1. Sintaxis básica

Para crear una animación, define fotogramas clave y aplícalos a un elemento usando la propiedad de animación.

• Ejemplo:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

En este ejemplo:

• La regla @keyframes define los pasos de la animación, cambiando el color de fondo y la posición.
• La clase .animate-box aplica la animación, que se ejecuta durante 5 segundos y se repite infinitamente.

2. Controlar el tiempo de la animación

Puedes controlar el tiempo, el retraso y el recuento de iteraciones de una animación.

• Ejemplo:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: Duración de la animación.
• facilidad de entrada y salida: función de aceleración.
• 1s: Retraso antes de que comience la animación.
• 3: La animación se repetirá tres veces.
• alternativo: la animación invertirá la dirección en cada iteración.

3. Combinando transiciones y animaciones

Puedes usar transiciones y animaciones juntas para crear efectos más dinámicos.

• Ejemplo:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

Este ejemplo:

• La clase .button usa una transición para escalar ligeramente el botón al pasar el mouse.
• La clase .pulse-button utiliza una animación para crear un efecto de pulsación continua.

Ejemplo práctico:

Combinemos transiciones y animaciones para crear un botón interactivo y responsivo.

HTML:

Hover Me!

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

En este ejemplo:

• El botón cambia su color de fondo y se mueve ligeramente hacia arriba cuando se coloca sobre él.
• Cuando se hace clic en el botón, este tiembla usando una animación personalizada.

Ejercicio de práctica

1. Cree un efecto de desplazamiento para un enlace que cambie su color y agregue un subrayado mediante una transición.
2. Crea una animación de fotograma clave que mueve un elemento en un círculo.
3. Combina transiciones y animaciones para crear un elemento interactivo como un botón o una tarjeta que se escala, cambia de color o se anima durante la interacción.

Siguiente: En la próxima conferencia, exploraremos CSS Flexbox Deep Dive, donde aprenderá cómo utilizar Flexbox por completo para crear diseños avanzados y responsivos. ¡Manténganse al tanto!

sígueme en LinkedIn

Ridoy Hasán