Introduction to Creating CSS Animations

Introducción a la Creación de Animaciones CSS

Introduction to CSS Animations

CSS animations allow you to add movement and dynamism to HTML elements without the need for JavaScript. You can define an animation using the @keyframes property.

CSS example:

@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 */
}

The @keyframes Property

The @keyframes property defines the states of the animation over time. In the example above, moveRight moves an element from left to right.

Advanced Animations

You can adjust the behavior of animations using properties like animation-duration, animation-delay, and animation-timing-function.

CSS example:

.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 */
}

CSS Transitions

CSS transitions are a simpler way to add animations to specific CSS properties when they change from one value to another.

CSS example:

.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;
}

This article provides detailed examples of CSS animations and transitions to bring your websites to life.