Star Wars

Sortez les popcorns ! Aujourd’hui, nous allons créer le titre de la bande annonce de Star Wars ‘Le Réveil de la Force’.

Cet article est un extrait du cours CSS Animation 101. Pour une période limitée, vous pouvez payer ce que vous voulez. Inscrivez-vous !
Notre exemple associe l'animation CSS à quelques autres propriétés CSS utiles, en particulier les transformations `scale`, `translate` et `rotate`. ## Transformations On pourrait penser que la propriété transform crée une animation, mais en réalité elle est utilisée pour définir la position statique, la déformation ou le redimensionnement d'un élément. Nous pouvons l'utiliser pour créer de superbes effets mais pour cela nous avons besoin d'un transform différent pour chaque keyframe ou chaque état que nous animons. ## Transform: scale(), translateZ() et rotateY() Nous pouvons agrandir ou rapetisser des éléments grâce à `scale`. Avec `translateZ`, nous pouvons déplacer des éléments sur l'axe des Z. Cet axe correspond à une ligne que vous traceriez depuis vous jusqu'à l'écran. Dans le cas présent, j'utiliserai un mélange de scale et translateZ pour créer l'illusion que les mots volent dans l'espace. Enfin, nous utiliserons `rotateY` pour faire tourner sur elles-mêmes les lettres du sous-titre. Pour les faire tourner sur l'axe des Y nous ferons travailler notre navigateur en 3D. ## SVG, HTML et CSS Pour préparer cet exemple, j'ai créé deux fichiers SVG pour les mots [Star](/demo/starwars/images/star.svg) et [Wars](/demo/starwars/images/wars.svg) du logo. N'hésitez pas à les télécharger si vous voulez jouer avec pour suivre la démo. Le HTML de la démo est le suivant :
Star Wars
Une image statique d'[étoiles](/demo/starwars/images/bg.jpg) est utilisée pour l'arrière-plan. La police de caractères du sous-titre a été compliquée à trouver, alors pour cet exemple j'ai choisi la police web "Lato". Le positionnement absolu du contenu au centre de l'écran nous donne ceci : ## Animer Star et Wars Nous voulons que le texte principal disparaisse en fade out, et nous voulons également que sa taille diminue progressivement. C'est un excellent cas d'utilisation de la transformation `scale()`. Utilisons-la sur le mot "Star" avec ces keyframes : @keyframes star { 0% { opacity: 0; transform: scale(1.5) translateY(-0.75em); } 20% { opacity: 1; } 89% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateZ(-1000em); } } Il y a deux propriétés qui changent durant cette animation, `opacity` et `transform`. Le changement d'opacité le fait démarrer transparent puis disparaître à la fin, de façon à ce que nous puissions reprendre l'animation en boucle. La transformation commence par la définition de scale à `1.5`. Cela signifie que la taille du texte au départ est à 150% de sa taille normale. À 89%, nous fixons la propriété transform sur une scale de 1. Autrement dit, entre 0% et 89%, la dimension passe de 150% à 100%. Le `transformZ` final fait disparaître rapidement les mots. Nous pouvons appliquer ces keyframes au mot "Star" ainsi : .star { animation: star 10s ease-out infinite; } .wars { animation: wars 10s ease-out infinite; } La propriété `animation` définit ici une animation que nous avons appelée `star` ayant une durée de 10 secondes. Elle applique la fonction intégrée de timing `ease-out` et elle indique qu'elle doit se répéter indéfiniment. Nous appliquons une règle similaire pour le mot "Wars". ## Créer la 3D Pour utiliser les transformations 3D en CSS, que ce soit pour déplacer un élément le long de l'axe des Z ou pour le faire tourner sur les axes des Y ou des Z, il faut créer un cadre pour la 3D. En termes HTML, cela signifie qu'il faut créer un container et indiquer au navigateur que ce sera le cadre de notre 3D. Pour cela, nous ajoutons ceci à notre div `.starwars-demo` : .starwars-demo { perspective: 800px; transform-style: preserve3d; } Ces deux propriétés indiquent au navigateur que les éléments enfants du container doivent être positionnés en 3D et non à plat. [CSS Tricks[ donne de plus amples détails sur la propriété. Par ailleurs, la propriété `perspective` indique au navigateur la "profondeur" de la scène. Ici, nous avons choisi `800px`. Des valeurs plus réduites créent des perspectives plus "extrêmes" car le point de fuite est plus rapproché. Maintenant que cette partie est au point, passons au sous-titre. ## Le Réveil de la Force Dans la bande-annonce, les lettres du sous-titre tournent sur elles-mêmes. Nous pouvons recréer cet effet grâce à la transformation `rotateY`. Dans cet exemple, nous avons inséré chaque lettre dans un élément `span`, de façon à pouvoir animer chacune. Mais je me suis rapidement rendu compte d'un problème : il n'existe pas de manière simple d'animer chacune des lettres du sous-titre. Ma première approche était d'insérer manuellement chacune des lettres dans une balise `span`. Ça marchait, mais le HTML était un peu confus. La démo actuelle inclut un peu de JavaScript (merci à [Tady](https://twitter.com/tadywankenobi) pour son assistance) qui insère automatiquement chaque lettre dans un `span`. Appliquons maintenant une animation à chaque lettre. D'abord, les keyframes : @keyframes spin-letters { 0%, 10% { opacity: 0; transform: rotateY(90deg); } 30% { opacity: 1; } 70%, 86% { transform: rotateY(0); opacity: 1; } 95%, 100% { opacity: 0; } } On commence par faire tourner les lettres de 90 degrés, puis aux alentours de 70% de l'animation elles font face au spectateur. Nous pouvons appliquer cet ensemble de keyframes à chaque span de cette façon : .byline span { animation: spin-letters 10s linear infinite; } .byline { animation: move-byline 10s linear infinite; } Le résultat est que chaque span contenant une lettre va disparaître et tourner sur lui-même lentement, avant de s'effacer à la fin de l'animation. Si on met tout ensemble, nous avons notre [démo finale](http://codepen.io/donovanh/pen/pJzwEw?editors=110).

Cet article est un extrait du cours CSS Animation 101. Pour une période limitée, vous pouvez payer ce que vous voulez. Inscrivez-vous !