24.08.2017

L'un des meilleurs exemples d'animations CSS3.

Les propriétés CSS3 ont ouvert un grand nombre de nouvelles portes aux développeurs et concepteurs Web, vous permettant de créer de l'animation et de l'interactivité directement dans Balisage CSS, en contournant Flash, Silverlight ou effets secondaires. Ci-dessous, nous avons recueilli meilleurs exemples Animations CSS3, y compris les effets individuels et les sites Web.

01. Une maison partagée

One Shared House est un webdocumentaire sur les expériences de la designer UX Irene Pereyra, qui faisait partie d'une communauté féministe dans les années 1970 à Amsterdam. Dès votre arrivée sur le site, vous ne serez pas seul : les mouvements de votre curseur seront surveillés.

Au lieu d'un défilement banal, Pereira et son partenaire Anton Repponen se sont inspirés du jeu "Où est Carmen Sandiego dans le monde?" du début des années 90. Ils ont utilisé l'écran du bas pour diviser le contenu, vous donnant la possibilité de déterminer à votre manière le niveau d'engagement dans l'histoire.

L'interaction est combinée avec la narration pour offrir une expérience fascinante et nouvelle. Le courage et la ténacité de Pereira et Repponen, qui ont mené ce projet autofinancé pendant deux ans, sont également importants : "Cela nous permet d'expérimenter des disciplines et des techniques qui n'ont généralement pas leur place dans les projets des clients" dit Pereira.

02. Termes de type

Type Terms est une feuille de triche animée créée par Supremo, une agence de conception Web basée à Manchester. Après avoir fait quelques recherches, ils ont constaté que le plus Une information intéressante en ligne sur la typographie est simple, des images statiques. L'équipe avait besoin d'une excuse pour expérimenter les animations SVG et CSS, et cela s'est avéré être une excellente opportunité.

"J'ai décidé de créer quelque chose d'attrayant pour aider les nouveaux designers à apprendre les règles typographiques clés", explique le designer Dan Heywood.

L'équipe insiste sur l'importance pour les designers d'avoir une bonne compréhension de la typographie. Pour ceux qui apprennent les règles pour la première fois ou pour les concepteurs expérimentés qui ont besoin d'un rafraîchissement, cette feuille de triche est à la fois éducative et agréable à apprendre. Le contenu est ciblé, les informations sont claires et les animations CSS sont fluides et fluides.

03.Waaark

Toute interaction sur le site Waaark révèle une incroyable attention aux détails. Le directeur artistique Jimmy Raheriarisoa et le développeur front-end Antoine Wodniack, qui ont créé Studio French, ont pensé à tout. Ils ont prévu comment les scènes changeraient d'une page à l'autre, comment le texte s'estomperait et comment serait l'animation pour les graphiques SVG.

Tout prend vie tout en conservant performance et disponibilité. Ils ont ajouté des raccourcis clavier pour améliorer l'expérience utilisateur pour tous.

Interrogé sur son portfolio récemment publié, Vodniak a expliqué que l'interaction était point clé: « Internet devient de plus en plus créatif, et il devient nécessaire de former un duo créatif entre développeur et designer. Les développeurs ont toujours besoin de nouveaux défis et les designers ont besoin de solutions pour rendre leurs idées possibles. »

04. Tableau périodique

Le tableau périodique des éléments est un objet populaire auprès des concepteurs pour présenter les nouvelles technologies Web. Conçue par le web designer barcelonais Ricardo Cabello, cette table est assemblée à partir de nombreux éléments animés la première fois que vous l'exécutez.

Ce tableau peut être tourné dans différentes directions avec la souris. Vous pouvez également modifier la forme du tableau en bas de la page.

Cabello a expérimenté pour voir s'il pouvait utiliser sa bibliothèque JavaScript three.js pour transférer les effets de la démo vers le moteur de jeu famo.us.

• Lire aussi :

05. Créatures CSS

Nous savons tous que travailler dans l'industrie du design peut parfois devenir monotone, alors sortez de votre emploi du temps et amusez-vous avec ce joli petit projet CSS.

CSS Creatures permet aux utilisateurs de créer et d'animer leur propre ami Web. Super? Il vous suffit d'envoyer un tweet à @CSSCreatures avec la couleur, le caractère et la fonction souhaités. Ton Création CSS apparaîtra sur le site en moins de 25 secondes !

06. AT-AT Walker de Star Wars

Cette animation CSS3 illustrée a été créée par Anthony Calzadilla. Cliquez sur le lien "voir les os" sur l'iPad et voyez comment chaque pièce bouge et fonctionne.

07 GT Amérique

Type de gril publié nouvelle police GT-Amérique. Chaque partie de ce site raconte une histoire sur une police.

GT-America porte le nom du pays dans lequel il s'est inspiré - les États-Unis. Il y a plus de 40 animations créées par le designer Josh Schaub. Vous pouvez même interagir avec le site pour donner vie aux illustrations. Nous aimons la façon dont les animations et les vidéos ont été utilisées pour montrer l'incroyable flexibilité de la police.

08. Caaaaaaaat

Le concepteur de sites Web et réalisateur interactif japonais Masayuki Kido a créé ce chat animé qui s'étire pour s'adapter à la largeur de la fenêtre du navigateur. Rendez la fenêtre suffisamment étroite et le mot changera avec des conséquences amusantes. Ce n'est pas tout ce que le site a à offrir, mais nous ne voulons pas vous spoiler - allez voir par vous-même !

09. Bibliothèque de Greenwich

Généralement des sites services publics ne diffèrent pas par leur beauté et leur commodité, mais le site Web de la bibliothèque de Greenwich fait exception à la règle. La conception de ce site est le résultat de deux années de recherche, d'essais et de développement.

Notre moment préféré est l'illusion de dessiner des éléments sur un rouleau. Habituellement, cette astuce est réalisée avec SVG, mais dans ce cas, les animations CSS et la superposition d'éléments habituelles ont été utilisées, ce qui semble encore plus intéressant que les graphiques SVG complexes.

10. Couvertures d'album interactives

De nombreuses pochettes d'albums de musique classique ont non seulement été refaites avec CSS, mais elles sont même sensibles à la musique ! La démo comprend First Impressions de Stroke et Unknown Pleasures de Joy Division. Important: ne fonctionne que dans Google Chrome.

Tout le monde navigateurs modernes, à l'exception d'IE9, prennent en charge les transitions CSS et les animations CSS, qui vous permettent d'implémenter une animation à l'aide de CSS, sans impliquer JavaScript. L'animation est appliquée à tous les éléments html, ainsi qu'aux pseudo-éléments :avant et :après

Prise en charge du navigateur

C'EST À DIRE: 10.0
Firefox : 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
safari: 4.0 -webkit-
opéra: 12.1, 12.0 -o-
iOS Safari : 9, 7.1 -webkit-
Opéra Mini : -
Navigateur Androïd : 44, 4.1 -kit web-
Chrome Pour Android: 44

Pour utiliser l'animation dans votre projet, il vous suffit de faire deux choses :

1. Créez l'animation elle-même en utilisant le mot-clé @keyframes
2. Connectez-le à l'élément qui doit être animé et spécifiez les propriétés souhaitées.

Règle @keyframes

règle @images clés vous permet de créer une animation à l'aide d'images clés - des états d'objet à un certain moment.

Les images clés d'animation sont créées à l'aide de mots-clés à partir de et pour(équivalent à 0% et 100%) ou en utilisant des points de pourcentage, qui peuvent être définis autant que vous le souhaitez. Vous pouvez également combiner des mots clés et des points de pourcentage.

Si initiale ( à partir de, 0%) ou finale ( pour, 100 %), le navigateur les définira sur les valeurs calculées des propriétés animées telles qu'elles seraient si aucune animation n'était appliquée.

Si deux images clés ont les mêmes sélecteurs, la suivante remplacera la précédente.

Lors de la définition d'une animation immédiatement après une propriété @images clés doit suivre le nom de cette animation ( prénom doit alors être spécifié dans la propriété animation de l'élément à animer).

@keyframes move ( from ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

@keyframesmove( à partir de ( 50% { 100% { transformer : translateX(0px) ;

Nous avons créé une animation qui fonctionne comme ceci :

1. Début des animations ( à partir de vous pourriez écrire 0%) - la position de l'élément le long de l'axe X est 0px ;
2. Le milieu de l'animation (50%) - la position de l'élément le long de l'axe X est de 130px ;
3. Animation de fin ( pour nous avons utilisé 100%) - nous renvoyons l'élément au début de l'animation, c'est-à-dire la position de l'élément le long de l'axe X est 0px ;

Ici et ci-dessous, par commodité, j'ai écrit dans les exemples quelques lignes de JavaScript qui permettront alternativement d'ajouter ou de supprimer une classe d'animation sur un élément, donc pour jouer l'animation, il suffit de cliquer sur cet élément.

Les images clés peuvent être regroupées :

@keyframes move ( from ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

@keyframesmove( à partir de ( transformer : translateX(0px) ; 25%, 50% { transformer : translateX (130px ) ; 100% { transformer : translateX(0px) ;

Plusieurs animations peuvent être affectées à un même élément, leurs noms et paramètres doivent être écrits dans l'ordre d'affectation :

element ( nom-animation : animation-1, animation-2 ; durée-animation : 2 s, 4 s ; )

élément( nom-animation : animation-1, animation-2 ; animation-durée : 2s, 4s ;

L'animation est connectée à un élément à l'aide de deux commandes - nom_animation et animation-durée .

Nom de l'animation

Biens nom_animation spécifie le nom de l'animation. Il est recommandé d'utiliser un nom qui reflète l'essence de l'animation, tandis que vous pouvez utiliser un ou plusieurs mots liés par un espace - ou souligner _.

nom-animation : déplacer ;

Fonction heure

Biens fonction de synchronisation d'animation vous permet de définir une fonction spéciale responsable de la vitesse de lecture de l'animation. Notez que la vitesse de lecture de l'animation est le plus souvent non linéaire, c'est-à-dire sa vitesse instantanée dans différentes zones sera différente. Au ce moment Il existe plusieurs arguments déjà intégrés pour cette règle : faciliter, facilité dans, facilité , facilité d'entrée, linéaire , début de l'étape , fin d'étape.

Cependant, vous pouvez créer ces fonctions vous-même. fonction spéciale cubique-bézier (P1x, P1y, P2x, P2y); prend quatre arguments et construit une courbe de distribution de valeur basée sur eux pendant le processus d'animation. Vous pouvez vous entraîner à créer vos propres fonctions et voir comment elles fonctionnent sur ce site.

Et enfin, l'animation peut être transformée en un ensemble de valeurs discrètes à l'aide de la fonction pas(nombre de pas, direction), dont les arguments sont le nombre de ses pas et la direction, qui peut prendre les valeurs début ou alors finir .

• faciliter- fonctionnalité par défaut, l'animation démarre lentement, accélère rapidement et ralentit à la fin. Correspond à cubique-bézier(0.25,0.1,0.25,1).
• linéaire- l'animation se produit uniformément tout au long du temps, sans fluctuations de vitesse ; correspond à cubique-bézier(0,0,1,1).
• facilité dans- l'animation démarre lentement, puis s'accélère doucement à la fin ; correspond à cubique-bézier(0.42,0,1,1).
• facilité- l'animation démarre rapidement et ralentit doucement à la fin ; correspond à cubic-bezier(0,0,0.58,1).
• facilité d'entrée- l'animation commence lentement et se termine lentement ; correspond à cubique-bézier(0.42,0,0.58,1).
• cubique de Bézier(x1, y1, x2, y2)- voir au dessus.
• hériter- hérite de cette propriété de l'élément parent.

Comparaison visuelle

Retarder l'animation

Biens délai d'animation définit le délai avant que l'animation ne commence à jouer, spécifié en secondes ou en millisecondes. Un retard négatif démarre l'animation à partir d'un certain point de son cycle, c'est-à-dire à partir de l'heure spécifiée dans le délai. Cela vous permet d'appliquer une animation à plusieurs éléments avec un déphasage, en ne modifiant que le temps de retard. Si vous souhaitez que l'animation commence au milieu, définissez un délai négatif égal à la moitié du temps défini dans durée des animations. Non hérité.

element ( animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Il y aura 10 secondes avant que cette animation ne démarre. )

Répétition d'animation

Biens nombre d'itérations d'animation vous permet d'exécuter l'animation plusieurs fois. Non hérité. Définissez la valeur sur n'importe quelle valeur positive. 1, 2, 3 … etc. ou alors infini pour une répétition sans fin. Sens 0 ou tout nombre négatif supprime l'animation de la lecture.

Avant l'avènement de CSS3, le mot "animation" donnait des sueurs froides aux codeurs. Et tout cela parce qu'à cette époque, fabriquer des produits de haute qualité et belle animation n'était pas une mince tâche. CSS ne pouvait pas faire cela, donc toutes les animations ont été faites en JavaScript. Il a fallu fouiller un tas de forums, retrouver les mêmes camarades d'infortune, passer beaucoup de temps sur le développement, et à la fin entendre le concepteur : "D'accord, ça ira." Et lorsque CSS3 est enfin sorti, le feu d'artifice ne s'est arrêté que le matin, et le champagne a coulé à flot. Ce fut un jour important pour tous les développeurs Web (le lendemain, Microsoft a annoncé la fin de Assistance Internet explorateur). Avec l'avènement de CSS3, de nombreux tâches difficiles devenu simple et agréable à travailler. Il en va de même pour les animations en CSS, dont je parlerai dans cet article.

Transitions CSS

Les transitions CSS vous permettent d'apporter des modifications aux propriétés CSS en douceur et au fil du temps. Ainsi, vous avez la possibilité de contrôler la transition d'un élément d'un état à un autre. Commençons par l'exemple le plus simple et continuons.

Lorsque vous survolez le carré, la couleur d'arrière-plan change en douceur.

Voyons maintenant de plus près comment gérer les transitions en CSS. Nous n'avons que 5 propriétés en service qui nous permettent de contrôler l'animation de transition :

• propriété de transition ;
• durée de transition ;
• fonction de synchronisation de transition ;
• délai de transition ;
• passage;

propriété de transition- précise la liste des propriétés qui seront animées ; les propriétés qui ne sont pas spécifiées ici seront modifiées de la manière habituelle. Vous pouvez animer toutes les propriétés d'un élément particulier en spécifiant la valeur all. Si vous ne spécifiez aucune propriété, la valeur par défaut est all.

propriété de transition : largeur ;

durée de transition- définit la durée de l'animation, le temps peut être spécifié en secondes ou en millisecondes.

durée de transition : 1 s ;

fonction de synchronisation de transition- fonction de temps, indique les points d'accélération et de décélération pour certaine période le temps de contrôler le changement de vitesse d'animation. En termes simples, vous pouvez utiliser cette propriété pour spécifier le comportement de l'animation. Par exemple, nous pouvons accélérer l'animation au début et ralentir à la fin, ou vice versa. Les courbes de Bézier sont utilisées pour définir le processus d'animation. En général, la fonction de synchronisation de transition vous permet de faire beaucoup de comportements différents pour les animations, c'est tout un sujet pour un article, donc nous n'irons pas en profondeur ici.

transition-timing-function: cubic-bezier(0, 0, 1, 1);

délai de transition- définit le délai avant le démarrage de l'animation, peut être spécifié en secondes ou en millisecondes.

Délai de transition : 500 ms ;

passage est une propriété générale qui vous permet de lister les quatre premières propriétés dans l'ordre : propriété, durée, fonction de temporisation, délai.

Transition : couleur de fond 1 s cube-bézier (0, 0, 1, 1) 500 ms ;

Nous avons ceci animation simple: lors du passage de la souris sur le carré, la largeur change ; durée de l'animation une seconde ; l'animation joue sur fonction linéaire; délai avant le début de l'animation 500 millisecondes.

À PARTIR DE en utilisant CSS transitions, vous pouvez animer presque toutes les propriétés et créer de nombreuses animations intéressantes, belles, fonctionnelles et même complexes qui compléteront et amélioreront votre projet. Par exemple, j'ai réalisé ce Material-FAB ​​sur CSS pur, en utilisant des transitions :

Animations CSS

Les animations CSS vous permettent d'en faire plus animations complexes que les transitions CSS. Tout le secret est dans @keyframes. La règle @keyframes vous permet de créer une animation à l'aide d'un ensemble d'images clés, c'est-à-dire qu'elle décrit l'état d'un objet à un certain moment. Prenons un exemple simple.

Notre cercle a pris vie et il semble battre.

Il existe 9 propriétés qui vous permettent de contrôler les animations CSS :

• nom-animation ;
• durée de l'animation ;
• fonction de synchronisation d'animation ;
• délai d'animation ;
• nombre d'itérations d'animation ;
• animation-direction ;
• animation-play-state ;
• mode de remplissage d'animation ;
• animation;

nom_animation- c'est le nom de l'animation qui relie la règle @keyframes au sélecteur.

Nom-animation : mon-animation ; @keyframes mon-animation ( 0% ( opacité : 0; ) 100% ( opacité : 1; ) )

nombre d'itérations d'animation- définit le nombre de répétitions de l'animation, la valeur par défaut est 1. La valeur infinie signifie que l'animation jouera indéfiniment.

Nombre d'itérations d'animation : 2 ;

direction des animations- définit la direction de l'animation.

Animation-sens : inverse ;

animation-play-state- cette propriété contrôle l'arrêt et la lecture de l'animation. Il existe deux valeurs, running (l'animation est lue, par défaut) et paused (arrête l'animation).

Animation-play-state : en pause ;

mode de remplissage d'animation- définit les propriétés CSS qui seront appliquées à l'objet avant ou après l'animation. Il peut prendre les valeurs suivantes :

• none - les propriétés CSS animées seront appliquées à l'objet uniquement pendant la lecture de l'animation, après la fin, l'objet revient à son état d'origine ;
• vers l'avant - Les propriétés CSS animées seront appliquées à l'objet après la fin de la lecture de l'animation ;
• vers l'arrière - les propriétés CSS animées seront appliquées à l'objet avant que l'animation ne commence à jouer ;
• les deux - les propriétés CSS animées seront appliquées à l'objet avant et après la fin de la lecture de l'animation ;

Animation-fill-mode : vers l'arrière ;

Propriétés durée des animations, fonction de synchronisation d'animation, délai d'animation fonctionnent de la même manière que des propriétés similaires dans les transitions CSS, dont j'ai parlé plus tôt, donc je ne le répéterai pas.

Avec les animations CSS, vous pouvez créer des animations assez complexes sans Utilisation de JavaScript. Un exemple frappant- Ce sont des chargeurs, c'est-à-dire des éléments qui montrent que quelque chose se charge sur votre page. Voici quelques exemples:

Module de trajectoire de mouvement

Motion Path Module CSS vous permet de créer un mouvement d'objets le long du chemin grâce à la propriété spéciale motion-path. Auparavant, une telle animation ne pouvait être réalisée qu'à l'aide de SVG ou de scripts complexes.

Cette spécification a 3 propriétés :

• trajectoire de mouvement ;
• décalage de mouvement ;
• rotation de mouvement ;

chemin de mouvement- cette propriété permet de spécifier les points (coordonnées) le long desquels l'objet se déplacera. La syntaxe est la même que celle de l'attribut de chemin SVG.

Chemin de mouvement : chemin ("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

décalage de mouvement- cette propriété met l'objet en mouvement du point de départ au point final. Il prend soit le double de la valeur de longueur, soit un pourcentage. Pour que l'objet commence à bouger, vous devez définir une animation qui ira de 0 à 100 %.

@keyframes avion-voler ( 0% (décalage de mouvement : 0 ; ) 100 % (décalage de mouvement : 100 % ; ) )

mouvement-rotation- cette propriété permet de spécifier de quel côté l'objet va avancer. Vous pouvez spécifier auto, reverse ou votre propre valeur en degrés ("-45deg", "30deg", etc.).

mouvement-rotation : automatique ;

Malheureusement, motion-path n'est actuellement supporté que dans Chrome et Opera, mais espérons que d'autres navigateurs prendront bientôt leur exemple, car la chose est vraiment utile.

Pour ceux qui n'ont pas encore compris comment ça marche, ou qui veulent mieux comprendre, j'ai fait un exemple (lien vers codeopen).

Cette collection contient les meilleures puces CSS de la plus haute qualité. Vous trouverez ici des démos et des techniques variées et étonnantes de célèbres maquettistes et designers qui tentent de prouver qu'il est désormais possible de faire presque tout avec du CSS pur. Vous pouvez également trouver ici plusieurs leçons qui décrivent en détail comment réaliser une telle création. J'espère que vous trouverez cette collection utile.

Nuages ​​CSS 3D

Dans cette démo, vous pourrez créer et éditer des nuages ​​fantaisistes en 3D. Ces nuages ​​​​CSS nous montrent clairement que les possibilités des technologies Web sont presque illimitées.

Logos CSS purs

Ce sont des exemples de logos réalisés uniquement avec du CSS pur. Pensez-y, les images n'ont pas été utilisées dans la création. C'est juste quelque chose.

Alphabet avec animation CSS

Exemple excellent et artistique Utilisation des CSS dans l'alphabet

Navigation 3D pour le site

Une barre de navigation simple mais très élégante pour un site Web, bien sûr réalisée uniquement avec CSS3. pas d'images et de scripts.

Doodle de Google sur CSS

L'un des nombreux griffonnages de Moteur de recherche Google fait en CSS. Ceci est un excellent exemple de bonne utilisation des animations CSS.

Glissière

Curseur bien fait et de haute qualité pour les images. Plus 4 exemples dans la démo.

Double anneau animé

Une belle bague animée et multicolore avec un léger gros code CSS

Flou avec CSS

Cela me semble un filtre très nécessaire, d'autant plus qu'il est fait sur CSS pur. Le flou peut attirer l'attention de l'utilisateur sur un point précis.

Le guide complet de Flexbox

Cet article concerne les boîtiers Flexbox réactifs. Il raconte complètement ces blocs, bien que l'article soit en anglais.

Menu CSS3 coloré et animé

Beau menu déroulant pour un site avec des icônes. Un énorme avantage est qu'il est entièrement réalisé en CSS.

Filtres CSS

Matériel de haute qualité en anglais, qui parle de l'application de filtres CSS aux images.

Formulaires CSS

Publication sur les formulaires CSS avec de nombreux exemples

Barre de progression CSS

Un tutoriel sur la façon de créer des barres de progression élégantes avec du CSS pur et de l'animation. Vous pouvez également voir un exemple et télécharger le code source.

Animation - Animer.css

Le projet d'animation CSS le plus populaire sur le Web aujourd'hui. Et probablement le plus simple et le plus de haute qualité, et aussi gratuit.

Indicateurs de charge - Spinkit

Pour être honnête, ces indicateurs ont déjà été rencontrés sur le blog, mais il me semble qu'ils devraient vous être à nouveau montrés. Puisque ce sont les plus beaux indicateurs CSS sur Internet.

Boutons

Maintenant, il est difficile de surprendre avec les boutons CSS, mais c'est une option assez décente.

Commutateur Générateur

petit et Internet de qualité une application avec laquelle vous pouvez créer de beaux interrupteurs à utiliser sur le site.

Info-bulles

Bibliothèque CSS d'info-bulles gratuites - Hint.css

Schémas de couleurs

Schémas de couleurs pour les personnes qui n'aiment pas coder

ATTENTION! Puisque dans cette leçon nous allons analyser l'animation, je ne pourrai pas vous montrer un exemple de son travail dans les images, alors n'hésitez pas à ouvrir l'éditeur pour le code et à y écrire le code donné dans cet article.

Bases de la création

Donc, tout d'abord, vous devez commencer par la façon de le créer. Vous êtes probablement habitué au fait que toute chose en CSS est implémentée en prescrivant le sélecteur souhaité avec les propriétés souhaitées avec les valeurs appropriées. Ainsi, lors de la création d'animation, cela seul est indispensable. Le schéma ressemble à ceci :

Créer les effets de transition eux-mêmes avec @keyframes

L'élément recherché reçoit cette même animation, ainsi que ses paramètres (tout cela à l'aide de propriétés et de leurs valeurs).

Donc, nous devons d'abord décrire modifications souhaitées dans @keyframes, regardons de plus près comment travailler avec eux.

Syntaxe @images clés

En fait, il me sera plus facile de tout vous expliquer sur exemple fini, quoique très simple. Le voici (le code est ajouté au fichier css):

@keyframes pulse( 0%(taille de police : 50px;) 50%(taille de police : 60px;)) 100%(taille de police : 50px;))

@keyframespulse( 0% ( taille de police : 50px ; ) 50% ( police - taille : 60px ; ) )

Ainsi, après le mot-clé @keyframes vient un mot arbitraire qui servira de nom à l'animation. Dans notre cas, c'est "l'impulsion". Prochaine ouverture un appareil dentaire, qui s'écrivent les bonnes règles.

Les pourcentages sont ce que l'on appelle des horodatages auxquels les propriétés spécifiées seront ajoutées à l'élément. Dans notre cas, ce qui est écrit signifie ceci : au tout début de l'exécution, la taille de la police sera de 50 pixels, en son milieu elle passera à 60, et à la fin elle redescendra à la taille initiale.

Mots clés de et à peuvent remplacer la notation en pourcentage, ils représentent respectivement 0 % et 100 %, c'est-à-dire le début et la fin de la lecture.

Appliquer l'animation en action

Jusqu'à présent, nous n'avons que du code qui génère un effet d'animation, mais il n'est appliqué nulle part. Si vous actualisez votre page Web, rien ne changera dessus. En conséquence, pour appliquer l'animation, vous devez effectuer deux actions :

Sélectionnez l'élément pour lequel il s'appliquera

Associez-le aux règles décrites via @keyframes (via le nom), et définissez également paramètres additionnels si nécessaire.

En essayant

Dans mon fichier html, j'ai créé un bloc avec la classe shadow, qui contient chaîne simple texte. Notre objectif est d'appliquer les effets d'animation que nous avons décrits précédemment à cet élément de texte.

Il y a deux propriétés obligatoires que vous devez spécifier dans ce cas, pour que tout fonctionne. Tout d'abord, c'est le nom que nous avons écrit dans les images clés. Deuxièmement, il s'agit de la durée de l'animation, car sans ce paramètre, le navigateur ne peut tout simplement pas la lire.

Ainsi, en plus des styles que notre bloc possède déjà, nous en ajoutons de nouveaux :

nom-animation : impulsion ; durée de l'animation : 2 s ;

Ainsi, tout sera répété 4 fois, après quoi il s'arrêtera. Comme vous l'avez compris, au lieu de quatre, vous pouvez entrer n'importe quel nombre.

animation infinie en css3

Implémenté très facilement en utilisant la même propriété. En fait, vous pouvez simplement atteindre le nombre de répétitions sur quelques milliers, c'est largement suffisant, mais en théorie, notre animation ne se répétera pas indéfiniment.

nombre d'itérations d'animation : infini ;

animation - iteration - count : infini ;

Ça y est, maintenant nous avons fait une boucle sans fin. Je ne vous conseille pas de vérifier s'il en est ainsi après avoir passé toute votre vie devant le moniteur. Il est juste utilisé dans les cas où vous voulez que l'effet se répète constamment et ne disparaisse pas. S'il est discret et ne distrait pas l'utilisateur, alors pourquoi pas.

Délai avant le démarrage

Par défaut, la lecture commence après pleine charge pages. Ce comportement peut être contrôlé à l'aide de la propriété animation-delay. Sa valeur est donnée en secondes.

Direction

Une autre propriété intéressante est la direction de l'animation. Par défaut, il est défini comme normal, si vous définissez l'inverse, toutes les images décrites seront exécutées dans la direction opposée. Vérifions quelle est la différence. Pour ce faire, j'ai légèrement modifié l'effet en ajoutant un autre cadre.

@keyframes pulse( 0%(taille de police : 50px;) 50%(taille de police : 60px;) 70%(taille de police : 80px;) 100%(taille de police : 50px;))

@keyframespulse( 0% ( taille de police : 50px ; ) 50% ( police - taille : 60px ; ) 70% ( police - taille : 80px ; ) 100% ( police - taille : 50px ; ) )

Ainsi, dans le sens normal dans la première moitié de l'animation, la taille de la police augmentera à 60 pixels, puis elle augmentera fortement à nouveau, déjà jusqu'à 80, après quoi elle reviendra à position de départ.

Riz. 2. format original texte

Riz. 3. Taille de la police vers la fin de l'animation, avant de revenir brusquement à son état d'origine.

Maintenant, nous définissons :

direction de l'animation : inverse ;

animation - sens : inverse ;

Tout a basculé. Tout d'abord, le texte augmentera jusqu'à 30 pixels, jusqu'à 80, le reste de l'animation, il diminuera progressivement, revenant finalement à sa taille précédente. Tout est simple.

Animation de forme

Et c'est peut-être l'un des paramètres les plus intéressants que vous pouvez expérimenter longue durée. Par défaut, toutes les modifications sont effectuées au même rythme. Ce type d'exécution d'animation est appelé linéaire, mais il en existe d'autres.