Générateur d'animation CSS

Le générateur d'animation CSS est un éditeur visuel pour les animations d'images clés CSS. Vous choisissez un préréglage de mouvement tel que le fondu entrant, la diapositive, le zoom, le rebond, le spin ou l'impulsion, ajustez la durée, la fonction de synchronisation, le retard, le nombre d'itérations, la direction et le mode de remplissage, regardez-le fonctionner dans un aperçu en direct, puis copiez deux choses : la règle @keyframes qui définit le mouvement et le raccourci d'animation qui le joue. Il transforme un bloc de CSS que la plupart des gens copient de la mémoire ou d'un framework en quelque chose que vous pouvez façonner et voir avant qu'atteindre votre feuille de style.

Une animation CSS a deux moitiés qui doivent être en accord La règle @keyframes nomme une séquence d'étapes, chacune écrite en pourcentage de décalage avec les valeurs de propriétés que l'élément doit contenir à ce stade, par exemple 0 % à l'opacité 0 et 100 % à l'opacité 1. la propriété d'animation fait alors référence à ce nom de clé et contrôle sa lecture : combien de temps il dure, comment il se calme, combien de temps attendre avant de commencer, combien de fois répéter et dans quelle direction s'exécute chaque passe. Un nom mal orthographié est la raison la plus courante pour laquelle une animation ne fait silencieusement rien, car le navigateur n'a pas de règle à laquelle se lier.

Tout s'exécute dans votre navigateur Choisissez un préréglage, faites glisser les curseurs de durée et de délai, changez la courbe d'assouplissement, définissez l'animation pour qu'elle se répète pour toujours ou un nombre fixe de fois, et appuyez sur rejouer pour la regarder à nouveau L'outil écrit le raccourci dans un ordre sûr avec le nom de l'image clé en premier, supprime le délai lorsqu'il est nul et omet toute partie qui correspond à sa valeur par défaut CSS afin que la sortie reste lisible Il n'y a pas de compte, rien n'est téléchargé et le générateur continue de fonctionner une fois la page chargée.

Cela rend également visibles les compromis de performance Les préréglages animent la transformation et l'opacité dans la mesure du possible, car ces deux propriétés sont gérées par le compositeur et ne forcent pas le navigateur à recalculer la mise en page, de sorte qu'elles restent lisses à des fréquences d'images élevées. Animer la largeur, la hauteur, le haut ou la marge recalcule plutôt la page sur chaque image et est la cause habituelle du bégaiement. Voir un rebond construit à partir de translateY plutôt que de haut est une leçon plus rapide sur les raisons pour lesquelles on est fluide que n'importe quelle lecture à ce sujet.