Pause & Loop Animations CSS avec WAIT! Animer
Il y a beaucoup de choses que vous pouvez faire avec une animation CSS pure, mais mettre en pause et mettre en boucle une animation n'est pas possible avec la spécification W3 actuelle.
Mais avec un outil gratuit comme ATTENDRE! Animer vous pouvez réellement créer des animations en boucle à partir de zéro avec délais personnalisés entre chaque boucle. Cela peut sembler une tâche banale, mais cela résout un problème pour de nombreux développeurs..
Il convient de noter qu’il existe une propriété CSS appelée délai d'animation lequel retarde la début d'une animation CSS. Cependant, il n'affecte pas une animation répétée comme il ne fait que retarder le point de départ.
ATTENDRE! Animer auto-calcule combien de pauses doivent être placées dans des images clés d'animation personnalisées pour créer la durée de pause exacte vous avez besoin entre les boucles. Cela pourrait être fait à la main mais c'est extrêmement convolu, pour ne pas dire super ennuyeux.
Cette application Web peut travailler avec n'importe quelle fonctionnalité d'animation CSS3, y compris les rotations et transforme. Vous n'écrivez pas de nouvelles propriétés CSS, mais plutôt construire au-dessus de la fonctionnalité d'images clés créer pauses basées sur des pourcentages (de 0% à 100%) à l'intérieur de l'animation.
Consultez la page d'accueil pour voir quelques exemples en action. Ce que vous pouvez faire est assez clair et le code source est là pour le copier / coller dans votre propre travail.
S'il vous plaît noter que c'est pas une bibliothèque à part entière. C'est un générateur qui crée votre code CSS à la volée en fonction de tout ce dont vous avez besoin pour le délai d'animation.
Si vous souhaitez une solution plus simple hors site, vous pouvez téléchargez le mix Sass. C'est un peu plus compliqué parce que il nécessite une carte Sass, vous aurez donc besoin de comprendre comment ajouter des propriétés personnalisées et écrire votre syntaxe correctement.
Voici un exemple de comment vous feriez appeler le mixin:
@include waitAnimate ((nomAnimation: nomAnimateur, images clés: (0: (transformation: échelle (1), couleur de fond: bleu)), 50: (transformation: échelle (2), couleur de fond: vert), 100: (transformation : échelle (3), couleur de fond: rouge)), durée: 2, waitTime: 1, timingFunction: easy, iterationCount: infinite));
Les développeurs Web professionnels ne devraient avoir aucun problème à apprendre les ficelles du métier et à en faire un mélange réutilisable. Mais les développeurs novices peuvent avoir du mal à le faire fonctionner, d’où l’application Web..
Tout ça code source est disponible gratuitement sur GitHub si vous souhaitez télécharger une copie localement. Mais comme il s'agit d'une fonctionnalité si étrange, ce n'est pas quelque chose dont vous aurez probablement besoin dans de nombreux projets. C'est pourquoi l'attente! Animer l'application Web devrait être plus que suffisant pour vous aider résoudre un problème ponctuel de Retarder des animations en boucle avec du CSS pur.
C'est un hack vraiment amusant qui est aussi assez obscur de par sa conception. Mais cela montre à quel point il est possible avec CSS3 et un peu d’ingéniosité.
