LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur de @keyframes CSS

Idée interneUn outil manque ?

Choisissez un préréglage d'animation et copiez le bloc @keyframes

Choisissez un préréglage de fondu, glissement, rebond, pulsation ou rotation, réglez la durée, la fonction de timing, le nombre d'itérations et la direction, et copiez le bloc @keyframes complet ainsi que le raccourci animation qui l'utilise, avec un aperçu en direct.

Sortie
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

L'aperçu redémarre à chaque changement de préréglage, avec le CSS exact affiché ci-dessous.

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

Écrire un bloc @keyframes à la main demande de nommer des paliers en pourcentage et de trouver la valeur de chaque propriété à chacun d'eux pour obtenir l'interpolation attendue, ce qui est facile à rater subtilement pour quelque chose comme un rebond à plusieurs paliers. Cet outil fournit une poignée de formes d'animation courantes sous forme de listes de paliers toutes prêtes, et laisse régler les paramètres de timing qui ne changent pas les keyframes elles-mêmes, afin que l'aperçu corresponde toujours exactement au bloc CSS affiché en dessous.

Mode d'emploi

  1. Choisissez un préréglage d'animation.
  2. Réglez la durée, la fonction de timing, le nombre d'itérations et la direction.
  3. Copiez le bloc @keyframes et le raccourci animation qui le suit.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

Pourquoi l'aperçu redémarre-t-il quand je change de préréglage ?
Changer de préréglage remplace les paliers @keyframes sous-jacents, donc l'élément d'aperçu est remonté pour garantir que l'animation en cours correspond bien à celle qui vient d'être générée plutôt que de terminer une ancienne version.
Que fait un nombre d'itérations « infinite » ?
Il répète l'animation indéfiniment, ce que l'aperçu utilise par défaut ; réglez plutôt un nombre si vous voulez qu'elle joue un nombre fixe de fois puis s'arrête.
Quelque chose est-il envoyé à un serveur ?
Non. Le bloc @keyframes et le raccourci animation sont construits dans la page à partir de votre préréglage et de vos réglages de timing, d'où la mise à jour instantanée de l'aperçu.

Revenir à tous les outils