Introduction to Creating CSS Animations

##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.