Introducción a la Creación de Animaciones CSS

Introducción a animaciones CSS

Las animaciones CSS permiten agregar movimiento y dinamismo a los elementos HTML sin necesidad de JavaScript. Puedes definir una animación utilizando la propiedad @keyframes.

Ejemplo de CSS:

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}
 
.box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation: moveRight 2s ease infinite alternate; /* Aplicar la animación */
}

Propiedad @keyframes

La propiedad @keyframes define los estados de la animación a lo largo del tiempo. En el ejemplo anterior, moveRight mueve un elemento de izquierda a derecha.

Animaciones avanzadas

Puedes ajustar el comportamiento de las animaciones utilizando propiedades como animation-duration, animation-delay, y animation-timing-function.

Ejemplo de CSS:

.box {
  animation-duration: 1s; /* Duración de 1 segundo */
  animation-delay: 0.5s; /* Retraso de inicio de 0.5 segundos */
  animation-timing-function: ease-in-out; /* Aceleración y desaceleración suave */
}

Transiciones CSS

Las transiciones CSS son una forma más sencilla de agregar animaciones a propiedades CSS específicas cuando cambian de un valor a otro.

Ejemplo de CSS:

.button {
  width: 100px;
  height: 40px;
  background-color: #3498db;
  transition: background-color 0.3s ease; /* Transición de color de fondo */
}
 
.button:hover {
  background-color: #e74c3c;
}

Este artículo proporciona ejemplos detallados de animaciones y transiciones CSS para dar vida a tus sitios web.