Animations CSS : introduction et exemples

Les effets animés les plus élémentaires en CSS peuvent être obtenus grâce à des propriétés telles que transform et transition . Cependant, le brouillon de travail CSS Animations Level 1 fournit un environnement plus complexe en utilisant les propriétés d' animation et @keyframes pour obtenir des effets d'animation perpétuels. Ceci est mieux compris à travers un exemple définitif.

Spécification des règles d'animation à l'aide de @keyframes

La règle @keyframes permet de spécifier le comportement d'animation que l'on souhaite appliquer à un identifiant d'animation dans la mise en page. L'identifiant est spécifié via animation-name ou en utilisant l' animation: name; sténographie.

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

Dans ce contexte, l'exemple ci-dessus changera la background-color du blanc au noir sur la durée de l'animation. from fait référence au début (0%) et to fait référence à la fin (100%). Ainsi, la règle peut également être réécrite avec des valeurs en pourcentage.

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

En soi, cela ne fera rien à moins que nous ne spécifions l'élément que nous souhaitons animer. De plus, vous devez également spécifier animation-duration puisque la valeur par défaut est 0.

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

Nous pouvons ensuite appeler notre conteneur en utilisant un div et le résultat serait ceci :

En règle générale, la plupart des animations CSS écrites en CSS pur utilisent des raccourcis car cela évite d'écrire plusieurs lignes de la logique d'animation. En tant que tel, voici une référence pour les valeurs des propriétés d' animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

Lectures complémentaires

Si vous souhaitez en savoir plus sur les animations CSS en profondeur, voici mes ressources recommandées :

• Codrops CSS Reference - Il s'agit d'une référence détaillée écrite et organisée par Sara Soueidan (@SaraSoueidan) et contient des exemples détaillés du fonctionnement de certaines propriétés CSS.
• Animations CSS MDN - Une introduction détaillée de style documentation aux animations CSS sur la page MDN Web Docs.
• Introduction à cubic-bezier() – Un article approfondi écrit par Temani Afif (@ChallengesCss) pour CSS-Tricks sur l'utilisation de la propriété cubic-bezier() pour créer des animations CSS avancées.

Exemples d'animations CSS

La meilleure façon d'apprendre quelque chose est à travers des exemples. La section suivante est entièrement consacrée aux divers effets obtenus grâce aux propriétés d'animation CSS.

Une dernière chose! De nombreux exemples d'animations ci-dessous sont associés à un peu de code. En tant que tel, j'ai ajouté un dépassement de hauteur maximale à cet article pour activer une barre de défilement. Vous pouvez également survoler chaque extrait de code et le copier dans le presse-papiers pour l'importer dans votre éditeur de code.

Vague

L'animation de vague est créée en dessinant d'abord un chemin SVG pour un motif de vague, puis en lui attribuant un ID. Ensuite, nous spécifions quatre classes nth-child avec des variables personnalisées animation-delay animation-duration d'animation. Chaque variable représente une vague individuelle à l'intérieur de l'animation, et chaque vague peut être stylisée indépendamment.

L'avantage de définir le modèle avec SVG est que le code devient facilement réutilisable.

Si vous regardez le chemin que nous avons tracé, nous spécifions quatre couches différentes pour la vague (à l'aide d'un axe personnalisé), puis référençons l'identifiant #wave-pattern que nous avons défini pour le chemin initial. C'est là que vous pouvez également modifier l'apparence de la couleur de chaque vague.

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

Chargement du texte

Cet effet de chargement est relativement facile à mettre en œuvre car il n'utilise qu'une poignée de propriétés d'animation pratiques. Tout d'abord, vous souhaitez spécifier content: attr() que vous appliquez ensuite à l'élément de texte que vous souhaitez animer. Ensuite, vous spécifiez l'animation elle-même, qui dans notre cas est animation: loading 5s linear infinite; .

La durée de l'effet de chargement peut être modifiée en changeant la propriété 5s. Et enfin, nous utilisons @keyframes pour appeler l'animation de chargement et changer sa largeur de 0% à 100% sur cette période de 5 secondes. Plus la valeur de la durée de l'animation est élevée, plus l'effet de chargement est lent.

Les cas d'utilisation spécifiques pour une animation comme celle-ci sont les effets de transition pour les chargements de page, mais également une solution fiable pour les projets d'application lorsque vous ne souhaitez pas vous appuyer sur des bibliothèques.

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

Vague de texte

L'une des premières choses que vous remarquerez à propos de cette animation est sa fluidité . Ceci est possible car nous utilisons la fonction calc() pour calculer mathématiquement chaque transition. Puisque nous écrivons l'animation en CSS pur, nous devons utiliser plusieurs éléments span pour spécifier chaque lettre consécutive dans l'animation.

En ce qui concerne la modification de la profondeur de la vague, vous pouvez d'abord modifier la durée de 3 secondes à un nombre inférieur ou supérieur. Plus haut signifie que l'effet de vague sera plus lent et vice-versa. Et, à l'intérieur des @keyframes , vous pouvez modifier la spécification -24px pour modifier la hauteur de la vague.

Plus la valeur négative est élevée, plus l'effet de vague est prononcé.

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

Effet d'impulsion / d'entraînement

Nous commençons par créer un conteneur pour le cercle auquel nous souhaitons appliquer l'effet. Ceci est spécifique à la démo mais vous pouvez réutiliser le code pour n'importe quel autre élément de votre page. Après, nous créons une classe appelée .circle qui servira d'effet d'entraînement animé.

Deux propriétés notables que nous utilisons dans cette classe sont l' opacity: 0.5; et animation: ease-out; . L'opacité est ce qui crée l'illusion d'avoir des ondulations/impulsions, et la transition de relâchement fait que ces ondulations sortent du conteneur d'origine.

Ensuite, nous prenons notre classe .circle et lui appliquons la propriété nth-of-type() . Pour cet exemple, nous utilisons 3 cercles individuels qui sortent facilement du conteneur d'origine. Dans les appels de type nième, nous appliquons animation-delay avec les valeurs de -0,5 s ; -1 s ; -1,5 s. Plus la valeur négative est élevée, plus il faudra de temps pour que les effets soient entièrement rendus.

Et enfin, nous appliquons @keyframes à notre animation d'impulsion spécifiée. Dans cet exemple, nous utilisons la propriété transform: scale() . Cela définit la taille des impulsions pour chaque animation. Plus la valeur est élevée, plus les ondulations sortantes vont apparaître.

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

Compteur (Nombres)

La propriété counter est facile à ignorer car vous ajoutez généralement des nombres à certains éléments à la main. Cependant, cela s'avère pratique lorsque vous souhaitez effectuer des affectations imbriquées approfondies sur des éléments de menu ou de grandes pages de documentation.

De plus, vous pouvez mettre en place un compteur automatisé pour les titres des articles de blog. Par exemple, vous écrivez une critique sur plusieurs outils. Et, mieux encore, le comptoir peut être décoré individuellement, ce qui vous donne plus de liberté de conception.

Mais, pour cette démo, nous nous concentrons sur l'utilisation de la propriété counter pour créer un effet de compteur automatisé. Alors, creusons et comprenons comment cela fonctionne. Pour cet exemple, nous créons d'abord un conteneur qui contiendra l'animation du compteur. Vous pouvez personnaliser cela comme vous le souhaitez. Ensuite, nous créons notre classe .count-numbers qui inclut la syntaxe de l'animation, dans ce cas, il s'agit de animation: count-numbers 10s linear infinite forwards; .

Pour le décomposer, nous spécifions le nom de notre animation, nous définissons la durée sur 10 secondes et nous définissons la direction de l'animation sur normal car nous ne voulons pas qu'elle compte à partir de 10. Bien que vous puissiez la définir sur alternez si vous souhaitez que votre compteur compte également à rebours.

Ensuite, nous spécifions une nouvelle classe appelée .count-numbers::avant que nous utilisons pour nommer notre compteur, dans ce cas, content: counter(count); . Ceci est important car l'étape suivante consiste à utiliser le counter-name pour animer l'effet via @keyframes .

La dernière étape consiste à écrire nos spécifications pour l'animation à rendre. Dans notre démo, nous comptons de 1 à 10, nous spécifions donc notre valeur @keyframes de 0% à 100% par incréments de 10%. Chaque incrément contient une instruction de contre-incrément qui utilise également notre nom de compteur : counter-increment: count 0; .

Ainsi, à 0% notre incrément est mis à 0 et à 10% il est mis à 1 pour projeter l'effet d'un compteur.

Essayez également de modifier le content: counter(count); spécification du contenu : compteur (compte, caractères romains supérieurs) ; et voyez ce qui se passe !

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

Balle rebondissante

Nous commençons par créer d'abord un conteneur pour notre balle, dans ce cas, il s'agit .ball-container .

Ensuite, nous spécifions la taille de la balle et le style de son apparence en utilisant une combinaison de couleurs d'arrière-plan et d'effets d'ombre. Dans notre démo, nous avons opté pour un effet plus brillant, mais vous pouvez le modifier selon vos propres besoins. Et enfin, nous spécifions l'animation, dans ce cas, nous fixons une durée à 5s et appliquons également une ease-in-out ce qui signifie que la transition a à la fois un début et une fin lents.

Une fois la balle tirée et l'animation définie, nous pouvons écrire nos règles @keyframes . Pour obtenir l'effet de rebond, nous utilisons transform: translatey(); par incréments de 50 %, donc de 0 % à 50 % à 100 %. L'accent est mis sur 50 % car ici, nous définissons la hauteur du rebond en spécifiant transform: translatey(-50px); – le bounce/float aura une hauteur de 50px (par rapport au conteneur). Plus le nombre négatif est élevé, plus la balle rebondira haut.

De même, spécifier un nombre plus petit réduira la taille du rebond.

La dernière partie consiste à ajouter une ombre, bien que vous puissiez également la supprimer car elle n'aura aucun effet sur l'animation de la balle elle-même. La seule différence avec l'ombre est que nous utilisons la propriété transform: scale() pour redimensionner l'ombre dans un contexte 2D. Nous fixons les valeurs en fonction de l'échelle d'effet que nous souhaitons accomplir.

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

Coin Flip

Ce que j'aime dans cette animation, c'est que nous pouvons définir un rayon de rotation incroyablement précis pour obtenir un effet qui donne l'impression que la pièce tourne véritablement. Donc, pour commencer, vous aurez besoin de 2 images (j'utilise SVG pour cette démo, mais les photos normales fonctionnent tout aussi bien. Assurez-vous simplement d'appliquer la bonne classe à chaque image.) et réglez-les sur opacity: 0; . Nous l'avons défini sur 0 car plus tard, nous utilisons @keyframes pour modifier leur opacité afin que les images apparaissent dans la vue à certaines positions pendant l'animation.

La classe .image-container est utilisée pour spécifier les dimensions des images à l'intérieur de la pièce. Assurez-vous de le spécifier également pour les images réelles, comme indiqué dans l'extrait ci-dessous. Ensuite, nous .coin-style qui est la partie extérieure (la pièce elle-même). Techniquement, vous pouvez le définir sur transparent, mais pour le plaisir d'une démonstration, nous le rendons visible.

Le concept principal de la classe .coin-style est la façon dont nous ajoutons l'animation, qui dans ce cas est : animation : coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) alternative infinie ; .

Le point d'intérêt est la spécification cubic-bezier() , qui nous donne l'effet de courbe tournante pour le conteneur de pièces. Ceci est pratiquement impossible à écrire par vous-même, donc ma recommandation est d'utiliser n'importe quel outil générateur pour rendre l'effet de courbe souhaité.

Et enfin, à l'intérieur de nos @keyframes , nous appliquons la fonction scaleX() pour redimensionner l'apparence de la pièce sur la base x-axis . Même la modification la plus minime des valeurs fournies (dans cette démo) modifiera l'apparence de l'effet « flip ».

Je pense que l'implémentation ci-dessous est aussi proche que possible de la perfection, mais peut-être que vous pouvez faire mieux !

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

Glisser-dans

Pour faire fonctionner cette animation, nous utilisons l' animation: ease-out; fonction en combinaison avec une valeur de position négative à l'intérieur @keyframes . Ainsi, dans cet exemple, nous spécifions 0% {opacity: 0;left: -700px;} ce qui rend notre élément slide-in invisible au début, mais également positionné à 700px à l'extérieur du conteneur.

Ensuite, nous spécifions 100% {opacity: 1;left: 0;} qui, à la fin de notre animation (nous l'avons définie sur 2 secondes), reviendra à une visibilité normale et replacera notre élément dans sa position relative.

Une chose intéressante à noter est que cet effet fonctionne dans toutes les directions.

Si vous souhaitez modifier l'effet de diapositive pour qu'il apparaisse du côté droit, vous devez modifier la gauche : ; valeurs à droite : ; et vice-versa pour les positions comme haut et bas. Vous pouvez également retarder l'animation en ajustant le temps nécessaire à l'élément pour glisser.

Une valeur plus élevée ralentira l'animation.

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

Effet goutte

Tout d'abord, qu'est-ce qu'un Blob ? Comme l'a dit Ian Latchmansingh, "Le Blob est une forme amorphe et pseudo-organique qui est couramment utilisée pour ancrer visuellement les pages de destination. Il sert généralement de masque ou de toile de fond pour une illustration. Environ 90 % du temps, le Blob est rempli d'un dégradé et repose sur la couche la plus basse d'un dessin. » . C'est certainement l'un des modèles les plus courants dans la conception Web moderne. Mais comment l'anime-t-on ?

Nous commençons par créer un conteneur à effet blob et spécifions également 3 éléments span individuels à l'intérieur du conteneur. Nous faisons cela parce que nous « dessinons » nous-mêmes le blob en utilisant une combinaison de propriétés border et border-radius.

Pour obtenir l'effet varié, nous utilisons nth-child pour styliser chaque élément individuellement. Si vous voulez devenir funky, n'hésitez pas à modifier les propriétés de pourcentage pour ajuster l'apparence de la goutte.

L'animation elle-même est réalisée en utilisant la propriété transform: rotate() dans une spécification @keyframes . Nous le réglons de 0 à 360 degrés car cela nous donne un effet perpétuel. La superposition de couleurs se fait via :hover et nous permet de définir une couleur de fond personnalisée. Et, en plus, nous créons également un conteneur séparé à l'intérieur du blob lui-même. Cela vous donne la possibilité de styliser des parties individuelles de votre mise en page pour avoir cet effet d'animation spécifique.

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

Commutateur de texte

Les effets d'animation sont généralement réservés aux conceptions Web créatives. Et dans ce cas, cet effet de changement de texte aidera à créer une première impression forte pour les visiteurs de votre site. Idéal pour les introductions d'en-tête, ou si personnalisé - peut être utilisé pour présenter les caractéristiques du produit, etc.

La première chose que nous faisons est de créer un conteneur pour l'effet réel. Après, nous spécifions une nouvelle classe div qui va contenir la logique d'animation. Dans notre cas, nous utilisons une longueur d'animation de 8 secondes, combinée à 3 spécifications animation-delay distinctes.

Le délai est utilisé pour déterminer quand un mot spécifique va apparaître dans la vue après avoir ajouté notre logique @keyframes .

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

Point culminant

Certes, cet effet spécifique n'utilise pas de propriétés d'animation concrètes. Cependant, l'utilisation de attr() et de la fonction var() devrait être suffisamment inspirante pour essayer de personnaliser davantage cet effet.

Si vous regardez la spécification ul li a::before - nous utilisons attr() pour spécifier à quel élément nous souhaitons attribuer l'effet. De plus, nous ajoutons une variable appelée –clr que vous utilisez pour définir une couleur personnalisée pour chaque élément auquel vous souhaitez appliquer l'effet de survol.

Pour cet exemple, nous avons également ajouté la propriété border-right pour indiquer la couleur que nous utilisons pour chacun des éléments. Vous pouvez le supprimer et l'effet fonctionnera toujours.

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }