Si deseas que un bloque aparezca en 1 segundo de forma sutil, puedes ajustar la animación para que tenga una duración de 1 segundo. Aquí tienes un ejemplo:
<!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: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
En este ejemplo, hemos creado una animación llamada fadeIn que ajusta gradualmente la opacidad del bloque desde 0 hasta 1 en un período de 1 segundo. Esto hará que el bloque aparezca de forma sutil en 1 segundo.
Al igual que antes, puedes personalizar los valores y estilos según tus preferencias. Espero que esto te sea útil para lograr el efecto que estás buscando.
Deja un comentario