Comment utiliser les animations CSS3 pour obtenir un chargement de page fluide

Cet article vous explique comment utiliser les animations CSS3 pour obtenir un chargement fluide des pages. Les amis dans le besoin peuvent s'y référer.

J'ai été impressionné par certaines des animations subtiles que j'ai vues sur les pages produits d'Apple.com. Cela commence généralement par une animation qui est jouée lors du chargement de la page, où un élément est introduit sur la page par glissement/fondu entrant. C'est si subtil et pourtant si satisfaisant pour l'utilisateur.

Récemment, j'ai découvert quelques problèmes liés à l'ajout d'effets d'animation simples sans ondulations, gâchant ainsi l'expérience.

Le problème avec la lecture d'animations lors du chargement de la page est que de nombreuses ressources (y compris les images et les scripts qui manipulent le DOM) provoquent un redessin/remise en page du navigateur. Cela entre en concurrence avec les ressources du navigateur lors de la tentative de lecture de l'animation, provoquant des pertes d'images. (Tutoriel recommandé : Tutoriel vidéo CSS3)

Une solution de contournement consiste à retarder le début de l'animation pour permettre à la page d'être dessinée avant la lecture de l'animation.

Normalement, lorsqu'un élément est introduit/affiché sur la page, l'élément sera masqué (opacité : 0) et gagnera en opacité complète au fil du temps.

Bien que la propriété d'animation ait un paramètre 'delay', spécifier une heure pour ce paramètre affichera l'élément avec la longueur de retard spécifiée dans son image finale. Il masquera ensuite l'élément et l'animera jusqu'à une opacité totale. C'est un effet indésirable. Nous ne voulons pas voir la dernière image clé pendant le délai.

Pour éviter de voir l'élément pendant le délai, suivez ces étapes :

1) Créez un div dans le html que nous voulons animer
2) Dans notre css Créez des images clés dans le fichier (ceux-ci définiront essentiellement comment les choses changent, dans ce cas l'opacité 0 à l'opacité 100)

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3) Créez une balise div dans notre css, définissez notre animation (durée, délai de démarrage, etc.) et en le liant à nos images clés

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}

La clé est d'utiliser :

animation-fill-mode:forwards

et

opacity: 0

, cela cache l'élément que nous souhaite animer avec un délai spécifié (opacité : 0) et force l'animation à s'arrêter sur la dernière image clé (opacité : 1).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!