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

Animación fade-in con CSS


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.

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…