Crear un efecto de aparición gradual en la carga de la página en CSS

1. Use la propiedad animation y la regla @keyframes para crear un efecto de aparición gradual en CSS
2. Use el método JQuery animate() para crear un efecto de aparición gradual en CSS

El efecto de aparición gradual aumenta la opacidad del elemento de oculto a visible. La opacidad del elemento seleccionado cambiará en el tiempo dado.

Este tutorial presentará métodos para lograr tal efecto al cargar la página en CSS.

Use la propiedad animation y la regla @keyframes para crear un efecto de aparición gradual en CSS

Hemos sabido un poco sobre el efecto de aparición gradual.

Este método utilizará la propiedad animation junto con las reglas @keyframes para lograr un efecto de aparición gradual mientras se carga la página. Primero, comprendamos cómo funciona la propiedad animation.

Cuando el estilo de un elemento cambia de un estilo a otro en el tiempo, podemos decir que es una animación. La propiedad animation es la abreviatura de propiedades como animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count y animation-direction en orden.

Podemos usar la propiedad animation para especificar solo las propiedades animation-name y animation-duration para crear un efecto de aparición gradual. La regla @keyframes se usa para cambiar los estilos CSS de los elementos seleccionados gradualmente.

Como resultado, se creará un efecto de animación. Usamos el valor de la propiedad animation-name en la regla @keyframes para seleccionar la animación para aplicar los estilos que cambian gradualmente.

Dentro de la regla @keyframes, usamos los selectores como to y from para aplicar los estilos. Los selectores to y from equivalen a 0% y 100%.

Los estilos aplicados con los selectores a cambiarán gradualmente a los aplicados con los selectores from. El cambio ocurrirá junto con el tiempo especificado con la propiedad animation-duration.

Para crear una animación de fundido de entrada, podemos cambiar la opacidad de la página de 0 a 1 usando los selectores en la regla @keyframes. La sintaxis de la regla @keyframe se muestra a continuación.

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

Por ejemplo, escribe algunos textos dentro de una etiqueta p en HTML.

En CSS, seleccione la etiqueta html y establezca la propiedad animation en fadein 2s. Aquí, fadein es el animation-name y 2s es la animation-duration.

A continuación, seleccione el nombre de la animación fadein con la palabra clave @keyframes como se muestra en la sintaxis anterior. Escriba 0% como el primer selector de fotogramas clave y establezca la propiedad opacity en 0.

Del mismo modo, escriba los otros dos selectores de fotogramas clave como 50% y 100% y establezca opacity en 0.5 y 1, respectivamente.

Aquí, cuando se carga la página, el texto será menos visible al principio ya que la opacidad se establece en 0. Gradualmente, la opacidad cambiará y el texto aparecerá visible en dos segundos.

Por lo tanto, podemos usar la propiedad animation para crear un efecto de aparición gradual.

Código de ejemplo:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

Use el método JQuery animate() para crear un efecto de aparición gradual en CSS

Este método discutirá otro enfoque usando jQuery para crear un efecto de aparición gradual en CSS.

Podemos usar el método animate() en jQuery para lograr nuestro objetivo. El animate() realiza el cambio gradual en el estilo del elemento seleccionado para crear un efecto de animación.

Podemos especificar los estilos CSS y proporcionar la velocidad de la animación. La sintaxis del método animate() se muestra a continuación.

(selector).animate({css - styles}, duration, easing, callback)

Cuando usamos el método animar(), el estilo predeterminado del elemento seleccionado se anulará con los estilos especificados en el método.

Usaremos el mismo texto en el HTML que en el primer método para propósitos de demostración. Primero, seleccione la etiqueta body de CSS y establezca la propiedad opacity en 0.

A continuación, seleccione la etiqueta body en jQuery e invoque el método animate(). Dentro del método, establece la opacity en 1 en los estilos y establece la duration en 2000.

En el ejemplo siguiente, el 2000 equivale a dos segundos, que es la duración de la animación. Inicialmente, cuando se carga la página, su opacidad es 0, y en dos segundos, cambia a 1.

De esta forma, el efecto de fundido de entrada se consigue mediante jQuery.

Código de ejemplo:

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>