fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

Animación slide-in con CSS


Puedes crear animaciones en CSS para que un bloque aparezca por la izquierda de forma sutil utilizando las propiedades @keyframes y animation. Aquí tienes un ejemplo de cómo podrías hacerlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Animación CSS</title>
</head>
<body>
  <div class="animacion-block"></div>
</body>
</html>

CSS (styles.css):

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.animacion-block {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: slideInFromLeft 1s ease-out forwards;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

En este ejemplo, hemos creado una animación llamada slideInFromLeft utilizando @keyframes. Esta animación mueve el bloque desde fuera de la pantalla (-100% de la anchura del bloque) hasta su posición final (0 en la coordenada X) mientras aumenta gradualmente la opacidad del bloque. La propiedad forwards en la regla de animación asegura que el bloque mantenga su estado final después de que termine la animación.

Puedes ajustar la duración de la animación (1s en este caso) y el estilo del bloque según tus preferencias. Recuerda que esta es solo una forma básica de lograrlo, y puedes experimentar con otros valores y propiedades para crear efectos más elaborados.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

abril 2024
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930  
  1. Hola, Muchas gracias por ofrecernos este contenido de calidad, es muy difícil encontrar contenido así en nuestro idioma. Aprovechando este…