Añade dinamismo a tu sitio web con animaciones de CSS
Las animaciones CSS desempeñan un papel fundamental en la creación de experiencias web atractivas y dinámicas, pues mejoran la experiencia del usuario al hacer que la navegación y la interacción con el sitio web sean más agradables y fluidas. En un entorno web donde la competencia por la atención del usuario es intensa, las animaciones pueden ayudar a captar y mantener el interés del espectador.
¿Qué ventajas tiene usar las animaciones con CSS sin JavaScript?
Hay varias razones por las cuales es beneficioso utilizar animaciones sin JavaScript en el diseño web moderno:
- Rendimiento mejorado
- Menor carga en el cliente
- Compatibilidad y accesibilidad
- Facilidad de Implementación y Mantenimiento
- Integración con Transiciones CSS
Descripción de algunos comandos de animación.
- animation-duration: Controla la duración de la animación.
- animation-delay: Especifica un retraso antes de que comience la animación.
- animation-timing-function: Define cómo se aplican las transiciones de velocidad a lo largo de la duración de la animación.
- animation-iteration-count: Determina cuántas veces se repetirá la animación.
- animation-direction: Indica si la animación se reproduce hacia adelante, hacia atrás o en ambos sentidos.
- animation-fill-mode: Especifica qué estilos se aplican al elemento antes y después de la animación.
- animation-play-state: Controla si la animación está en reproducción o en pausa.
- animation-range: Esta propiedad puede definir el rango de tiempo en el que la animación debería ocurrir.
- animation-timeline: Sirve para asociar una animación con una línea de tiempo. Depende de otras especificaciones como las animaciones de desplazamiento para definir y gestionar las líneas de tiempo de animación de manera más detallada.
¿Cómo creo una animación?
- Define la Animación con @keyframes, con este comando puedes establecer cómo un elemento debe cambiar su estilo en diferentes momentos durante una animación : @keyframes nombreDeLaAnimacion { /* Definición de puntos clave y estilos para la animación */ }
-
Uso de @keyframes con la Propiedad animation: Después de definir tus @keyframes, puedes utilizarlos junto con la propiedad animation para aplicar la animación a un elemento específico en tu HTML: .miElemento { animation-name: nombreDeLaAnimacion;
animation-duration: 3s;
/* Otras propiedades de animación */
}
Una vez aprendido esto, vamos a crear una animación.
Utilizaremos una funcionalidad nueva llamada animation-timeline, para ello, podemos consultar la web caniuse para consultar compatibilidad con nuestro navegador.
Crea un archivo básico con html, puedes usar el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animación con Css</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>¿Te gusta el diseño web?</h1>
<h2> Haz <span> scroll </span> a esta página y conoce una animacion nativa de css! </h2>
<h3> Verás una animacion de scroll sin JavaScript</h3>
<div class="contenedor-imagen">
<p>
En el dinámico mundo del diseño web, la creatividad y la innovación son los pilares que dan vida a experiencias digitales memorables. Te invitamos a explorar un viaje visual único donde el diseño cobra vida a través de la magia del CSS.
</p>
<p>
Sumérgete en un universo de movimiento, color y elegancia mientras exploras las posibilidades ilimitadas que ofrece la animación CSS. Desde sutiles transiciones hasta efectos sorprendentes, descubre cómo las técnicas de animación pueden transformar tu experiencia en línea.
</p>
<p>
Nuestro objetivo es inspirarte, desafiarte y llevarte más allá de los límites convencionales del diseño web. Acompáñanos en esta aventura donde cada línea de código cuenta una historia y cada animación despierta la imaginación.
</p>
<img src="img1.jpg" class="imagenes">
<p>La experiencia del usuario (UX) es un aspecto fundamental del diseño web que influye directamente en la percepción y la interacción de los usuarios con un sitio. Un diseño web intuitivo, accesible y fácil de usar es esencial para mantener a los usuarios comprometidos y satisfechos. Los principios de UX, que incluyen la usabilidad, la accesibilidad, la coherencia y la estética, son fundamentales para crear experiencias en línea memorables y efectivas.</p>
<img src="img2.jpg" class="imagenes">
<p>La velocidad de carga de un sitio web es un factor crítico en la experiencia del usuario y en el éxito general del sitio. Los estudios revelan que los usuarios modernos esperan que los sitios web carguen rápidamente, y cualquier demora puede resultar en una pérdida significativa de tráfico y conversiones. La optimización de la velocidad de carga, a través de prácticas como la compresión de imágenes, el uso de redes de distribución de contenido (CDN) y la minimización del código, es esencial para mantener a los usuarios comprometidos y satisfechos.</p>
<img src="img3.jpg" class="imagenes">
<p>
El diseño web receptivo ha revolucionado la forma en que interactuamos en línea. En la era digital actual, donde los usuarios acceden a la web desde una variedad de dispositivos, desde teléfonos inteligentes hasta tablets y computadoras de escritorio, el diseño adaptable se ha convertido en una necesidad. La capacidad de los sitios web para adaptarse dinámicamente al tamaño de la pantalla del usuario garantiza una experiencia óptima en todos los dispositivos, lo que resulta en una mayor retención de usuarios y una mejor satisfacción del cliente.
</p>
</div>
</body>
</html>
En una hoja de estilos llamada styles.css agregamos estilos básicos para nuestra pagina.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;
600;700;800&display=swap');
body {
max-width: 600px;
margin: 0 auto;
font-family: 'Poppins', sans-serif;
margin-top: 100px;
margin-bottom: 100px;
}
h2 span{
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #040913;
}
.contenedor-imagen {
text-align: center;
margin: 20px auto;
max-width: 100%;
}
.imagenes {
max-width: 100%;
height: auto;
}
p{
text-align: justify;
}
Creamos nuestra animación en el mismo archivo styles.css.
@keyframes show {
from {
opacity: 0;
scale: 25%;
}
to {
opacity: 1;
scale: 100%;
}
}
img {
view-timeline-name: --image;
view-timeline-axis: block;
animation-timeline: --image;
animation-name: show;
animation-range: entry 25% cover 50%;
animation-fill-mode: both;
}