#element {
    transform: rotateZ(45deg);
}

body {
    transform: rotateZ(45deg);
}

html {
    perspective: 500px;
}

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

. Le balisage suivant réalise exactement cela:

#element {
    transform: rotateZ(45deg);
}

L'illustration ci-dessous montre ce qui se passe lorsqu'une page est défilée verticalement et que nous appliquons une transformée de rotationy (45deg) à l'élément

de notre document directement (à gauche) et à l'aide du motif de wrapper (à droite):

L'application directe de la transformation se traduit par un résultat visuel asymétrique en raison de la projection hors axe (car nous ne regardons plus le ?centre? de l'élément corporel). L'utilisation du motif de wrapper garantit que la propriété d'origine perspective de l'élément (50% 50% par défaut) sera toujours correctement centrée par rapport à l'élément

, nous donnant un effet visuel agréable.

En utilisant le modèle ci-dessus et en configurant les transformations CSS avec des valeurs de pourcentage chaque fois que possible, nous pouvons affecter notre élément

de manière cohérente, quelle que soit la taille de son contenu.

des transformations en animations

Ayant trié les subtilités de l'application des transformations CSS en élément

, les animations CSS sont la prochaine étape. En suivant les principes décrits ci-dessus, nous pouvons créer des animations qui mettent notre contenu Web en vue (ou la supprimer de la vue) de manière intéressante.

Considérez cette règle de base @keyframes:

body {
    transform: rotateZ(45deg);
}

Lorsqu'il est appliqué à un élément, cette animation le fera tourner sur son c?té gauche. Lorsqu'il est appliqué à un élément

qui utilise notre motif de wrapper, le résultat visuel est plus intéressant. Le document tournera en fait de l'extérieur de la zone visible de la fenêtre du navigateur et en vue complète:

De même, nous pouvons composer des animations qui suppriment fluide notre contenu Web de la vue. Par exemple, si nous voulions que notre page disparaisse au loin en tournant, nous pourrions utiliser quelque chose comme ceci:

#element {
    transform: rotateZ(45deg);
}

avec le résultat visuel étant:

Puisque nous pouvons utiliser la pleine puissance des animations CSS pour affecter l'intégralité de notre contenu Web, nous avons beaucoup de flexibilité en termes de génération de ces effets de page (et nous ne nous limitons certainement pas à utiliser les transformations CSS). Mais une fois que nous avons composé les effets que nous voulons appliquer à notre contenu, comment les faire déclencher pendant le processus de navigation de la page?

Attacher des animations à

Notre objectif est d'utiliser des animations de déclenchement à des moments stratégiques pendant l'expérience du navigateur afin de donner l'apparition de la transition de contenu en vue lorsqu'une page se charge et hors de vue lorsque l'utilisateur clique sur un lien.

Le premier endroit intuitif pour ajouter une animation à l'élément corporel serait l'événement JavaScript Onload. Il s'avère cependant que l'ajout d'une animation lorsque les incendies onload sont en fait trop tard. Cet événement déclenche en fait lorsque l'intégralité du contenu de notre page a terminé le chargement (y compris toutes les images ou autres ressources à forte intensité de bande passante). La connexion d'une animation à Onload sur une page à forte intensité de bande entra?nerait une affichage de notre contenu ?normalement?, suivi de la déclenchement et de la réévolution du contenu. Pas exactement l'effet que nous visions.

Alternativement, nous pourrions utiliser l'événement téléchargé DomContent qui se déclenche lorsque le navigateur a terminé l'analyse de la structure DOM de notre contenu (mais potentiellement avant que les ressources aient terminé le chargement). La démonstration de DomContent Télélée IE Drive IE illustre la différence entre ces deux événements. Cependant, dans les cas de contenu Web complexe, un navigateur moderne peut choisir d'effectuer un rendu ?progressif?, affichant la page avant que l'intégralité de l'arbre Dom a été chargé. Dans ces situations, le résultat visuel serait similaire au scénario de charge.

L'endroit optimal pour configurer une animation qui transitions notre contenu de page en vue est en ligne en haut de l'élément

. Cela garantit que l'animation commencera bien à mesure que le contenu est rendu (et que la position de départ du contenu sera celle de l'image clé de notre animation sélectionnée). Un effet secondaire agréable de cette approche est que l'animation peut en fait masquer tout rendu progressif, re-relance ou chargement de ressources qui peut se produire avec un contenu complexe.

La configuration des animations qui transitionnent notre contenu hors de vue sont également intéressantes. On pourrait supposer que nous pourrions attacher un gestionnaire ONClick à tous les éléments d'intérêt pour notre contenu (par exemple toutes les balises) et simplement définir les propriétés d'animation pertinentes (nom d'animation, durée d'animation, etc.) dans la fonction de rappel . Cependant, si nous ne retardons pas réellement la navigation de la procédure, nous ne verrons pas notre transition fluide attendue.

C'est une bonne occasion d'utiliser les événements d'animation décrits dans la spécification des animations CSS. En particulier, nous pouvons utiliser l'événement AnimationEnd pour détecter la fin de l'animation, puis déclencher une navigation (en définissant Window.Location.href, par exemple). Ainsi, notre onclick déclenchera l'animation ?Supprimer-From-View? et enregistrera un gestionnaire pour AnimationEnd sur

qui garantira que l'événement de navigation se produit.

Demo en direct disponible

Nous avons créé une démonstration et un didacticiel sur la mise en vie avec des pages avec des transformations et des animations CSS qui fournissent une profondeur et des exemples au-delà de ce que nous avons pu montrer ici. Le tutoriel lui-même utilise des animations pleine page lors de la navigation de page qui fonctionnent dans Internet Explorer 10 sur Windows 8 ainsi que des versions récentes de Chrome et Firefox.

pour simplement profiter des animations de page à page, parcourez les pages du tutoriel en utilisant les liens ?Continuer à…? dans le coin inférieur droit de chaque page.

à la fin du tutoriel, nous fournissons des conseils supplémentaires et un exemple de code sur la fa?on d'incorporer ces animations avec votre propre contenu Web.

l'enveloppement

Les transformations CSS et les animations CSS sont deux ensembles de fonctionnalités puissants qui permettent des expériences Web plus riches et plus immersives. Avec une petite quantité d'efforts, vous pouvez créer des pages Web (même statiques) qui offrent une expérience de navigation fluide et presque applicable.

Si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la ma?trise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme le CSS pratique.

Les questions fréquemment posées sur les animations CSS pleine page

Quelles sont les principales différences entre les animations CSS et les animations JavaScript?

Les animations CSS et les animations JavaScript servent le même objectif d'animation des éléments Web, mais ils ont des différences clés. Les animations CSS sont plus simples et plus faciles à mettre en ?uvre, en particulier pour les animations simples. Ils sont également plus adaptés aux performances car ils sont gérés par le moteur de rendu du navigateur. Cependant, les animations CSS ont un contr?le et une flexibilité limités par rapport aux animations JavaScript. Les animations JavaScript, en revanche, offrent plus de contr?le et de flexibilité, permettant des animations complexes. Ils peuvent être pauvres, inversés ou manipulés en temps réel, et peuvent également répondre aux interactions des utilisateurs.

Comment puis-je rendre mes animations CSS réactives?

Rendre les animations CSS réactifs implique l'utilisation relative relative de relative? Des unités comme les pourcentages ou les unités de la fenêtre au lieu d'unités absolues comme les pixels. Cela garantit que les animations évoluent correctement quelle que soit la taille de l'écran. Vous pouvez également utiliser les requêtes multimédias pour ajuster les animations en fonction de tailles d'écran ou de types d'appareils spécifiques.

Puis-je utiliser des animations CSS avec SVG?

Oui, les animations CSS peuvent être utilisées avec SVG (Graphics vectoriels évolutifs). SVG possède son propre ensemble de propriétés CSS qui peuvent être animées, telles que le remplissage, la course et la transformation. Cela permet des animations plus complexes et intéressantes par rapport à l'animation d'éléments HTML réguliers.

Pourquoi mes animations CSS ne fonctionnent-elles pas dans certains navigateurs?

Tous les navigateurs ne prennent pas en charge toutes les propriétés d'animation CSS. Par exemple, Internet Explorer ne prend pas en charge la propriété d'animation-timing-fonction. Pour assurer la compatibilité des navigateurs croisés, vous pouvez utiliser des préfixes de fournisseurs comme -webkit-, -moz-, -o- et -ms- avant les propriétés d'animation. Vous pouvez également utiliser des outils comme AutopRefixer pour ajouter automatiquement ces préfixes.

Comment puis-je optimiser les performances de mes animations CSS?

Pour optimiser les performances des animations CSS, vous pouvez limiter le nombre de Propriétés animées, en particulier celles qui déclenchent des changements de mise en page comme la largeur, la hauteur et la marge. Au lieu de cela, utilisez des propriétés qui ne déclenchent que les changements composites comme la transformation et l'opacité. Vous pouvez également utiliser la propriété de changement de volonté pour informer le navigateur des propriétés susceptibles d'être animées.

Puis-je animer la propriété d'affichage avec CSS?

Non, la propriété d'affichage ne peut pas être animé avec CSS. En effet, il n'a pas d'états intermédiaires entre ses valeurs. Cependant, vous pouvez réaliser un effet similaire en animant les propriétés d'opacité et de visibilité.

Comment puis-je créer une animation en boucle avec CSS?

Vous pouvez créer une animation en boucle dans CSS en utilisant l'animation - Propriété de comptoir d'itération. En définissant sa valeur sur Infinite, l'animation se répétera indéfiniment.

Puis-je contr?ler la vitesse de mes animations CSS?

Oui, vous pouvez contr?ler la vitesse des animations CSS en utilisant la durée d'animation propriété. Cette propriété définit la durée qu'un animation prend pour terminer un cycle.

Comment puis-je suspendre une animation CSS?

Vous pouvez suspendre une animation CSS à l'aide de la propriété d'animation-play-State . En définissant sa valeur pour faire une pause, l'animation cessera de fonctionner.

Puis-je animer la propriété d'arrière-plan avec CSS?

Non, la propriété d'arrière-plan ne peut pas être animée avec CSS. Cependant, vous pouvez obtenir un effet similaire en disparaissant entre plusieurs images d'arrière-plan en utilisant la propriété Opacity.