Share
CSS a mûri de nombreuses façons au fil des ans, notamment en ce qui concerne les animations CSS. Chaque jour qui passe, de plus en plus de développeurs créent des interfaces vivantes et respirantes. Dans cet article, nous examinerons l’état des animations CSS, son évolution, ses capacités actuelles et les ressources et outils disponibles. Allons-y!
L’utilisation de l’animation sur le Web augmente, en grande partie à cause de la transition et @ keyframes ajouts à CSS. Il était une fois un jour où les animations et les CSS ne se connaissaient pas, mais ce n'est pas le cas aujourd'hui. Les articles, les tutoriels, les cours premium et même les directives de mouvement sont beaucoup plus accessibles qu’auparavant. La combinaison @ keyframes avec le animation propriété, avec transition a finalement donné aux développeurs la possibilité de concevoir le mouvement correctement et de conférer aux interfaces une personnalité et une vie autrefois inconsidérées.
D'après les directives de Google sur le mouvement de matériauIl n'y a jamais eu de période aussi excitante pour les animations CSS et le design d'interaction que maintenant!
Mise en œuvre actuelle du animation Cette propriété permet aux développeurs de contrôler la durée, le délai, le délai, le nombre d'itérations, la direction, le mode de remplissage et l'état de lecture. La partie chronométrage permet également une pas() une fonction. Cette fonction de synchronisation spéciale divise une animation ou une transition en segments (comme une bande de film), plutôt qu’en une transition continue d’un état à un autre. Les images clés permettent aux développeurs de mouvement de déclarer des positions à l'aide de de, à et même des pourcentages à animer entre les valeurs de propriété déclarées. C'est un bon début, mais nous en discuterons dans un instant.
Ensuite, il y a le glorieux transition propriété; une propriété aussi raffinée que animation et un qui nous permet de contrôler la vitesse d'animation lors de la modification des propriétés. Le processus de transition entre deux états est généralement appelé un transition implicite; terme qui décrit les états situés entre les états de début et de fin, définis implicitement par le navigateur. Les transitions permettent actuellement la personnalisation de la propriété, le timing, la durée et le délai.
La vidéo d'introduction ci-dessus est tirée de Up and Running With CSS Transitions de Craig Campbell..
L’animation CSS peut être puissante en son sein, mais elle manque toujours d’un aspect particulier que les animateurs désirent le plus; contrôle timeline-esque. Ce que je veux dire par là sont des séquences qui peuvent être influencées et manipulées en fonction du timing.
@keyframes move-object de propriété de position de départ et valeurs à 2s faire ceci attendre-jusqu'à 4s cela arrive à arrêt de propriété de position et valeurs
La syntaxe ci-dessus n'existe pas, mais donne une image plus détaillée de ce que les experts en animation du Web recherchent. GreenSock, par exemple, est bien connu pour ce type de séquençage, mais ne se produit malheureusement qu'en JavaScript. Ne serait-ce pas formidable d'avoir cela aussi en CSS? Je le pense.
Vidéo ci-dessus tirée de la plate-forme d'animation GreenSock: premiers pas par Craig Campbell.
Il y a certainement la capacité de contrôler animation et transition événements grâce à l’utilisation de JavaScript pour un contrôle plus granulaire d’une séquence. Avec JavaScript, les développeurs peuvent détecter le début de chaque nouvelle itération d'animation, lorsqu'une animation se produit, à la fin de l'animation et qu'il en va de même pour les événements de transition..
C’est une période passionnante pour les outils de développement de navigateur permettant d’inspecter et de régler les animations CSS. La plupart des navigateurs (Firefox, Chrome) permettent d'inspecter les animations CSS par rapport à Safari et Edge. D'après ce que me dit une source travaillant pour Microsoft, l'inspection des animations est une tâche que l'équipe de Microsoft souhaite réellement réaliser. Espérons qu'il en va de même pour Safari.
En ce qui concerne les navigateurs qui faire support inspection inspection nous avons les capacités suivantes…
Accentsconagua
::avant et ::après pseudo-éléments.images clés propriété et valeurs à la volée.images clés des noms.En fonction de la liste ci-dessus, les développeurs ont le choix, mais ils ont encore besoin de plus d’outils pour animer les interactions entre utilisateurs. Cela pourrait aussi être connu comme interpolation de propriété, l'insertion d'une valeur intermédiaire dans une série en la calculant à partir des valeurs connues environnantes; un peu comme lorsque vous passez à une nouvelle valeur avec des transitions. Ces animations dynamiques / réactives peuvent commencer à tout moment, sont indéterminées et ont des durées variables en fonction des interactions de l'utilisateur. Quelque chose encore qui ne peut pas être débogué ou inspecté à partir d'un outil de développement fourni par un navigateur pour le moment.
L’avenir de l’animation CSS est prometteur, même si, avec toutes les spécifications, il a tendance à ralentir. Le CSS trajectoire module, contenir, changera et le préfère-réduit-le mouvement la requête multimédia (pas encore standard et WebKit uniquement) sont les fonctionnalités à venir pour les animateurs CSS.
Les trajectoires de mouvement permettent aux développeurs d'animer n'importe quel objet graphique le long d'un chemin spécifié par l'auteur. Vous pouvez définir un chemin d’une manière très similaire à celle définie par SVG 1.1..
.my-element motion-path: path ('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7 , 0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4 z '); décalage de mouvement: 0; mouvement-rotation: inverse; le trajectoire définit un chemin qu'un élément suivra ou suivra. Notre décalage de mouvement propriété est l'emplacement de l'élément quelque part sur le chemin. La propriété mouvement-rotation est la direction à laquelle l'élément fait face lorsqu'il se déplace le long du chemin.
Découvrez ces collections de démos sur CodePen de Dan Wilson qui fournissent des exemples en direct illustrant trajectoire capacités.
le changera Cette propriété permet aux auteurs d'indiquer aux navigateurs le type de modifications attendues pour un élément. Cela permet au navigateur de configurer les optimisations appropriées à l'avance avant que l'élément ne soit réellement modifié..
.my-element will-change: transform;
Ce type d'optimisation peut améliorer le temps de chargement perçu et la mise en page d'une page en effectuant à l'avance des travaux coûteux avant qu'ils ne soient réellement nécessaires. En disant cela, il est suggéré que les développeurs ne s'appliquent pas changera à trop d'éléments car cela peut consommer des ressources et causer le ralentissement d'une page.
Cette addition non spécifiée à WebKit crée des styles évitant les grandes zones de mouvement aux utilisateurs spécifiant une préférence pour un mouvement réduit. Préférences de système.
@media (prefers-réduire-motion) .my-element animation: none;
Il s’agit plus d’une situation d’accessibilité que d’une création réelle de mouvement. Un intéressant à considérer et à vérifier à votre guise.
Ce module CSS indique que la sous-arborescence de l'élément est indépendante du reste de la page, ce qui permet des optimisations lourdes par les agents utilisateurs lorsqu'ils sont utilisés correctement. Le plus intéressant pour les animateurs CSS est le peindre valeur qui peut être transmise.
.element-with-motion contient: peinture;
Si l'élément contenant est hors écran ou masqué, le navigateur peut directement ignorer le contenu de son contenu car il est garanti qu'il est masqué ou masqué. Ceci fournit finalement de la valeur en assurant un pipeline de rendu plus rapide lors d'une peinture initiale. Ceci est encore un brouillon au W3C.
Il existe de nombreuses façons de suivre les animations CSS. Vous trouverez ci-dessous quelques outils et ressources, y compris des spécifications à lire à votre guise. Si vous connaissez d'autres ressources utiles et géniales, veuillez nous en informer dans les commentaires et nous les ajouterons à la liste. Bonne animation!
