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.
Deja un comentario