Créez un nouveau fichier appelé styles.css . Nous allons maintenant définir les règles de présentation qui feront partie de chaque élément mot de l'animation, contrôlées par leur balise span. L'affichage sous forme de bloc, combiné à l'alignement du texte centré, fera apparaître chaque mot sur une ligne distincte alignée horizontalement au milieu de son conteneur. Le positionnement relatif servira à animer par rapport à son flux de texte positionner.

Les éléments d'animation qui ont la classe avant et arrière ont une animation spécifique qui leur est appliquée. Cette étape définit l'animation à appliquer aux éléments span dont le conteneur parent a à la fois le Animé et en arrière ou les attaquants classer.

Notez qu'il n'y a pas d'espace entre les Animé et en arrière référence de classe, ce qui signifie que l'élément parent doit avoir les deux.

L'animation mixte est définie en utilisant les mêmes paramètres que ceux utilisés pour les animations avant et arrière. Au lieu d'appliquer les animations à chaque enfant du parent, le nième enfant Le sélecteur est utilisé pour appliquer des paramètres d'animation alternés. L'animation vers l'arrière est appliquée à chaque même -number enfant, tandis que l'animation avant est appliquée à chaque impair -nombre d'enfant.

Les animations que nous venons de créer sont faites avec une initiale ' de 'position de départ, sans position verticale ni réglage de rotation. Le ' à 'position est l'état final de l'animation, qui définit les éléments avec une position verticale et un état de rotation ajustés. Des paramètres de fin légèrement différents sont utilisés pour les deux animations afin d'éviter que le texte ne devienne illisible en raison du chevauchement des animations mixtes.

06. Flip book

• Auteur: Adam Kuhn

Lors de l'animation avec CSS, une approche très simple est parfois nécessaire. Et il existe peu de méthodes d'animation plus simples que le flip book. Utilisant pas () en tant que fonction de chronométrage, nous sommes en mesure de reproduire cet effet. Bien que cela puisse sembler saccadé et contredire directement notre mission de maintenir la fluidité, avec le bon rythme, cela peut sembler tout aussi parfaitement organique.

Alors, comment ça marche? Nous définissons notre fonction d’assouplissement de l’animation avec seulement quelques paramètres supplémentaires - indiquant à notre animation le nombre d’étapes nécessaires et à quel point au cours de la première étape nous souhaitons commencer (début Fin) - ressemblant un peu à ça, par exemple étapes (10, démarrer) .

Dans nos images clés, nous pouvons maintenant désigner un point final pour notre animation: pour cet exemple, supposons que notre animation dure 10 secondes et que nous utilisons 10 étapes. Dans ce cas, chaque étape durera une seconde, passant immédiatement à l'image suivante d'une seconde sans transition entre les deux.

Encore une fois, cela semble aller à l'encontre de la fluidité, mais c'est ici que les animations en escalier peuvent vraiment briller. Nous pouvons parcourir une feuille de sprite de manière incrémentielle et animer image par image comme un flip book. En définissant des images de taille égale mais en les compilant sur une seule image horizontale (ou verticale), nous pouvons définir cette image comme arrière-plan d'élément et définir une position d'arrière-plan en pixels ou en pourcentage comme point final de notre animation, permettant une seule étape pour chaque Cadre. La feuille de sprite se déplacera ensuite et remplira l'élément image par image avec une nouvelle image d'arrière-plan en fonction de sa position.

Prenons un exemple. Dans ce cas, des ensembles de jambes animées sont ajoutés à certains caractères de texte. Tout d'abord, nous allons définir le nom, la durée, le nombre de pas, la position de départ et le nombre d'itérations de notre animation:

Encore une fois, notez que la durée est relativement rapide à moins d'une seconde complète pour 32 images au total. Ensuite, nous définirons nos images clés:

Notez que le positionnement vertical de l'image est cohérent partout, ce qui nous indique que les sprites sont étirés horizontalement sur l'image, soit 1280px en largeur totale. Comme nous avons défini 32 images au total pour cette image, nous pouvons en déduire que chaque image doit avoir une largeur de 40 pixels. Découvrez ce Codepen ci-dessous.

Il est important de noter qu’une feuille de sprite volumineuse peut potentiellement nuire considérablement aux performances. Veillez donc à dimensionner et compresser les images. Avec une feuille de sprite bien conçue et une durée d'animation appropriée, vous disposez désormais d'une animation fluide capable de transmettre des mouvements complexes.

07. Faire des bulles

• Comme vu sur: 7 UP
• Voir le code
• Auteur: Steven Roberts

L'animation de bulles CSS qui figure sur 7UP est un bel exemple de transfert d'un thème de marque dans la conception de site Web. L'animation se compose de quelques éléments: le «dessin» SVG des bulles puis deux animations appliquées à chaque bulle.

La première animation modifie l'opacité de la bulle et la déplace verticalement dans la zone de visualisation; le second crée l'effet de vacillement pour plus de réalisme. Les décalages sont gérés en ciblant chaque bulle et en appliquant une durée et un délai d'animation différents.

Afin de créer nos bulles, nous utiliserons SVG . Dans notre SVG, nous créons deux couches de bulles: une pour les plus grosses bulles et une pour les plus petites. À l'intérieur du SVG, nous positionnons toutes nos bulles en bas de la zone de visualisation.

Afin d'appliquer deux animations distinctes à nos SVG, utilisant toutes deux la propriété transform, nous devons appliquer les animations à des éléments séparés. Le élément en SVG peut être utilisé un peu comme un div en HTML; nous devons envelopper chacune de nos bulles (qui sont déjà dans un groupe) dans une balise de groupe.

CSS a un moteur d'animation puissant et un code vraiment simple afin de produire des animations complexes. Nous allons commencer par déplacer les bulles vers le haut de l’écran et modifier leur opacité afin de les atténuer au début et à la fin de l’animation.

Afin de créer un effet d'oscillation, nous devons simplement déplacer (ou traduire) la bulle vers la gauche et la droite, juste la bonne quantité - trop de choses donneront à l'animation un aspect trop décalé et déconnecté, tandis que trop peu passera la plupart du temps inaperçu. L'expérimentation est essentielle lorsque vous travaillez avec une animation.

Afin d'appliquer l'animation à nos bulles, nous utiliserons les groupes que nous avons utilisés précédemment et l'aide de nième de type pour identifier chaque groupe de bulles individuellement. Nous commençons par appliquer une valeur d'opacité aux bulles et changera propriété afin d'utiliser l'accélération matérielle.

Nous voulons garder tous les temps et délais d'animation à quelques secondes d'intervalle et les configurer pour qu'ils se répètent à l'infini. Enfin, nous appliquons le facilité d'entrée fonction de synchronisation de notre animation wobble pour lui donner un aspect un peu plus naturel.

08. Souris à défilement

• Comme vu sur: Formation balte
• Voir le code
• Auteur: Steven Roberts

Une animation subtile de la souris à défilement peut donner une direction à l'utilisateur lorsqu'il atterrit pour la première fois sur un site Web. Bien que cela puisse être accompli en utilisant des éléments et des propriétés HTML, nous allons utiliser SVG car cela est plus adapté au dessin.

À l'intérieur de notre SVG, nous avons besoin d'un rectangle avec des coins arrondis et un cercle pour l'élément que nous allons animer, en utilisant SVG, nous pouvons mettre à l'échelle l'icône à n'importe quelle taille dont nous avons besoin.

Maintenant que nous avons créé notre SVG, nous devons appliquer des styles simples afin de contrôler la taille et la position de l'icône dans notre conteneur. Nous avons enroulé un lien autour du SVG de la souris et l'avons positionné au bas de l'écran.

Ensuite, nous allons créer notre animation. À 0 et 20% du parcours de notre animation, nous voulons définir l'état de notre élément lorsqu'il commence. En le réglant à 20% du chemin, il restera immobile pendant une partie du temps lorsqu'il sera répété à l'infini.

Nous devons ajouter le point de départ de l'opacité, puis transformer à la fois la position Y et l'échelle verticale à la marque 100%, la fin de notre animation. La dernière chose que nous devons faire est de supprimer l'opacité afin de faire disparaître notre cercle.

Enfin, nous appliquons l’animation au cercle, ainsi que la propriété ‘transform-origin’ et la changera propriété pour permettre l'accélération matérielle. Les propriétés d'animation sont assez explicites. Le cubique-bezier la fonction de synchronisation est utilisée pour d'abord tirer le cercle en arrière avant de le déposer au bas de la forme de notre souris; cela ajoute une sensation ludique à l'animation.

09. Écriture animée

• Comme vu sur: Jardin huit
• Afficher le code du chemins et texte
• Auteur: Steven Roberts

Le site Web Garden Eight utilise une technique d'animation courante dans laquelle le texte semble être écrit. Pour obtenir l'effet, nous nous tournons vers SVG. Pour commencer, nous allons créer le SVG. Il existe deux approches ici: convertir le texte en chemins pour les animer ou utiliser du texte SVG. Les deux approches ont leurs avantages et leurs inconvénients.

Commencez par créer notre animation d'images clés. La seule fonction dont nous avons besoin est de changer le stroke-dashoffset . Maintenant que nous avons créé notre animation, nous devons appliquer les valeurs à partir desquelles nous voulons animer. Nous définissons le accident vasculaire cérébral-dasharray , ce qui créera des espaces dans le trait. Nous voulons définir notre trait sur une valeur suffisamment grande pour couvrir tout l'élément, en compensant finalement le tiret par la longueur du trait.

La magie se produit lorsque nous appliquons notre animation. En animant le décalage, nous faisons apparaître le contour - créant un effet de dessin. Nous voulons que les éléments soient dessinés un à la fois, avec un certain chevauchement entre la fin du dessin d'un élément et le début du dessin du suivant. Pour y parvenir, nous nous tournons vers Toupet / SCSS et nième de type pour retarder chaque lettre de la moitié de la longueur de l'animation, multipliée par la position de cette lettre particulière.

10. Oiseaux volants

• Comme vu sur: Fournier Père et Fils
• Afficher le code d'un seul oiseau ou la troupeau entier
• Auteur: Steven Roberts

Nous commençons par des lignes vectorielles complètement droites, dessinant chaque image de notre animation, représentant l'oiseau dans un état de vol différent. Nous manipulons ensuite les points vectoriels et arrondissons les lignes et les arêtes. Enfin, nous mettons chaque cadre dans une boîte de taille égale et les plaçons côte à côte. Exportez le fichier au format SVG.

La configuration HTML est vraiment simple. Nous avons juste besoin d'envelopper chaque oiseau dans un conteneur afin d'appliquer plusieurs animations - une pour faire voler l'oiseau et l'autre pour le déplacer sur l'écran.

Nous appliquons notre SVG d'oiseau comme arrière-plan à notre div d'oiseau et choisissons la taille que nous voulons que chaque cadre soit. Nous utilisons la largeur pour calculer approximativement la nouvelle position d'arrière-plan. Le SVG a 10 cellules, nous multiplions donc notre largeur par 10, puis modifions légèrement le nombre jusqu'à ce qu'il semble correct.

L'animation CSS a quelques astuces dont vous n'êtes peut-être pas au courant. Nous pouvons utiliser le fonction de synchronisation d'animation pour afficher l'image par étapes - un peu comme feuilleter les pages d'un cahier pour faire allusion à une animation.

Maintenant que nous avons créé notre cycle de mouches, notre oiseau bat actuellement des ailes mais ne va nulle part. Afin de la déplacer sur l'écran, nous créons une autre animation d'image clé. Cette animation déplacera l'oiseau sur l'écran horizontalement tout en changeant également la position verticale et l'échelle pour permettre à l'oiseau de se déplacer de manière plus réaliste.

Une fois que nous avons créé nos animations, nous devons simplement les appliquer. Nous pouvons créer plusieurs copies de notre oiseau et appliquer différents temps et délais d'animation.

11. Traversez mon hamburger

• Comme vu sur: Meilleure agence de marque
• Afficher le code du travées et SVG
• Auteur: Steven Roberts

Cette animation est utilisée partout sur le Web, transformant trois lignes en une croix ou une icône de fermeture. Jusqu'à récemment, la majorité des implémentations ont été réalisées à l'aide d'éléments HTML, mais en réalité SVG est beaucoup plus adapté à ce type d'animation - il n'est plus nécessaire de gonfler le code de vos boutons avec plusieurs étendues.

En raison de la nature animable et du SVG et de son DOM navigable, le code pour accomplir l'animation ou la transition change très peu - la technique est la même.

Nous commençons par créer quatre éléments, que ce soit à l'intérieur d'un div ou des chemins à l'intérieur d'un SVG. Si nous utilisons des étendues, nous devons utiliser CSS pour les positionner à l'intérieur du div; si nous utilisons SVG, cela est déjà pris en charge. Nous voulons positionner les lignes 2 et 3 au centre - l'une sur l'autre - tout en espaçant les lignes 1 et 4 uniformément au-dessus et en dessous, en veillant à centrer l'origine de la transformation.

Nous allons nous appuyer sur la transition de deux propriétés: l'opacité et la rotation. Tout d'abord, nous voulons atténuer les lignes 1 et 4, que nous pouvons cibler à l'aide de la : nième enfant sélecteur.

La seule chose à faire est de cibler les deux lignes médianes et de les faire pivoter de 45 degrés dans des directions opposées.

12. Cercles de chasse

• Comme vu sur: Meilleure agence de marque
• Voir le code
• Auteur: Steven Roberts

L'icône de chargement animée est composée de quatre cercles. Les cercles n'ont pas de remplissage, mais ont des couleurs de trait alternées.

Dans notre CSS, nous pouvons définir des propriétés de base pour tous nos cercles, puis utiliser le : nième de type sélecteur pour appliquer un autre accident vasculaire cérébral-dasharray à chaque cercle.

Ensuite, nous devons créer notre animation d'images clés. Notre animation est vraiment simple: il suffit de faire pivoter le cercle de 360 ​​degrés. En plaçant notre transformation à 50% de l'animation, le cercle retournera également à sa position d'origine.

Une fois notre animation créée, il ne nous reste plus qu'à l'appliquer à nos cercles. Nous définissons le nom de l'animation; durée; nombre d'itérations et fonction de synchronisation. Le 'easy-in-out' donnera à l'animation une sensation plus ludique.

Pour le moment, nous avons notre chargeur, mais tous les éléments tournent ensemble en même temps. Pour résoudre ce problème, nous appliquerons des délais. Nous allons créer nos retards en utilisant une boucle Sass for.

En raison des retards, notre cercle s'anime maintenant à son tour, créant l'illusion des cercles se poursuivant. Le seul problème avec cela est que lorsque la page se charge pour la première fois, les cercles sont statiques, puis ils commencent à se déplacer, un à la fois. Nous pouvons obtenir le même effet de décalage, mais arrêter la pause indésirable dans notre animation en réglant simplement les retards sur une valeur négative.

Page suivante: Plus d'exemples d'animation CSS à explorer

• 1
• deux

Page actuelle: Tutoriels d'animation CSS