El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Animaciones en CSS

Siguiente ►
►

Las animaciones en CSS permiten a los desarrolladores agregar efectos visuales dinámicos a los elementos HTML sin la necesidad de utilizar JavaScript. Con las animaciones de CSS, puedes cambiar las propiedades de un elemento de manera gradual durante un período de tiempo.

Conceptos Clave de Animaciones en CSS

  1. @keyframes: Define los estados intermedios de la animación.
  2. Propiedad animation: Aplica la animación a un elemento y define sus características.
  3. Propiedades de Animación: Controlan aspectos específicos de la animación como la duración, el retraso, la dirección, etc.

Sintaxis de @keyframes

La regla @keyframes se utiliza para crear una animación. Dentro de esta regla, defines los estados intermedios de la animación utilizando porcentajes o palabras clave como from y to.

@keyframes nombreAnimacion {
  from {
    /* Estado inicial */
  }
  to {
    /* Estado final */
  }
}

Ejemplo Básico de @keyframes

@keyframes moverDerecha {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Propiedad animation

La propiedad animation es un atajo que permite definir varias propiedades de animación en una sola línea. Aquí están las propiedades que puedes especificar:

  • animation-name: Nombre de la animación (definida con @keyframes).
  • animation-duration: Duración de la animación.
  • animation-timing-function: Función de temporización de la animación.
  • animation-delay: Retraso antes de que comience la animación.
  • animation-iteration-count: Número de veces que se repite la animación.
  • animation-direction: Dirección de la animación.
  • animation-fill-mode: Cómo aplicar estilos antes y después de la animación.
  • animation-play-state: Estado de reproducción de la animación.

Ejemplo de Uso de animation

.elemento {
  animation: moverDerecha 2s ease-in-out 1s infinite alternate;
}

En este ejemplo:

  • moverDerecha es el nombre de la animación.
  • 2s es la duración de la animación.
  • ease-in-out es la función de temporización.
  • 1s es el retraso antes de que comience la animación.
  • infinite indica que la animación se repetirá indefinidamente.
  • alternate hace que la animación se reproduzca hacia adelante y luego hacia atrás.

Propiedades de Animación Individuales

animation-name

Define el nombre de la animación.

.elemento {
  animation-name: moverDerecha;
}

animation-duration

Define la duración de la animación.

.elemento {
  animation-duration: 2s;
}

animation-timing-function

Define la función de temporización de la animación.

.elemento {
  animation-timing-function: ease-in-out;
}

animation-delay

Define el retraso antes de que comience la animación.

.elemento {
  animation-delay: 1s;
}

animation-iteration-count

Define el número de veces que se repetirá la animación.

.elemento {
  animation-iteration-count: infinite;
}

animation-direction

Define la dirección de la animación.

.elemento {
  animation-direction: alternate;
}

animation-fill-mode

Define cómo aplicar estilos antes y después de la animación.

.elemento {
  animation-fill-mode: forwards;
}

animation-play-state

Define el estado de reproducción de la animación.

.elemento {
  animation-play-state: paused;
}

Ejemplo Completo

Vamos a crear un ejemplo completo donde un cuadrado se mueve de izquierda a derecha y cambia de color durante la animación.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animaciones en CSS</title>
  <style>
    .cuadrado {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: relative;
      animation: moverDerecha 3s ease-in-out infinite alternate, cambiarColor 3s ease-in-out infinite alternate;
    }

    @keyframes moverDerecha {
      from {
        left: 0;
      }
      to {
        left: 200px;
      }
    }

    @keyframes cambiarColor {
      from {
        background-color: blue;
      }
      to {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <div class="cuadrado"></div>
</body>
</html>

En este ejemplo:

  • El cuadrado se mueve de izquierda a derecha.
  • El color del cuadrado cambia de azul a rojo.

Ejercicio Práctico

Ejercicio

Crea una animación para un círculo que cambie su tamaño de pequeño a grande y su opacidad de 0.5 a 1. La animación debe durar 4 segundos y repetirse indefinidamente.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de Animación en CSS</title>
  <style>
    .circulo {
      width: 50px;
      height: 50px;
      background-color: green;
      border-radius: 50%;
      opacity: 0.5;
      animation: crecerYOpacar 4s infinite;
    }

    @keyframes crecerYOpacar {
      from {
        width: 50px;
        height: 50px;
        opacity: 0.5;
      }
      to {
        width: 100px;
        height: 100px;
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="circulo"></div>
</body>
</html>

En este ejercicio:

  • El círculo cambia su tamaño de 50px a 100px.
  • La opacidad del círculo cambia de 0.5 a 1.
  • La animación dura 4 segundos y se repite indefinidamente.

Conclusión

Las animaciones en CSS son una herramienta poderosa para mejorar la experiencia del usuario en un sitio web. Con la regla @keyframes y las propiedades de animación, puedes crear efectos visuales complejos y atractivos sin necesidad de JavaScript. Practica creando tus propias animaciones para dominar esta habilidad esencial en el desarrollo web.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados