@KeyFrames CSS: meilleurs exemples de code

CSS @KeyFrames est utilisé pour définir les différentes étapes et changements d'animations. 1) Utilisation de base: Définissez les animations via @keyframes, telles que Fadein passant de transparent à opaque. 2) Animation de boucle: utilisez le mot-clé infini pour créer des effets de rotation continus. 3) Optimisation des performances: utilisez l'attribut de changement de volonté pour améliorer la maîtrise de l'animation. 4) Accessibilité: ajustez les animations en fonction des préférences de l'utilisateur via la requête multimédia préfère réduite en mouvement. 5) Contrôle flexible: combinez des variables CSS pour atteindre l'animation de changement de couleur. 6) Ajustez l'effet: rendre l'animation plus naturelle en modifiant la durée et la fonction de synchronisation.

La règle CSS @keyframes est le cœur de l'animation, qui définit les différentes étapes et changements d'animation. Dans cet article, nous plongerons sur la façon d'utiliser @keyframes pour créer des effets d'animation riches, pas seulement des transitions simples, mais aussi des scénarios d'application complexes et des meilleures pratiques.

En ce qui concerne l'application de @keyframes , nous devons considérer son importance dans la conception Web moderne. L'animation n'est pas seulement une décoration visuelle, mais aussi un moyen important d'améliorer l'expérience utilisateur. Avec @keyframes nous pouvons contrôler avec précision les changements d'éléments sur la chronologie, ce qui entraîne des effets d'animation lisses et convaincants.

Commençons par un exemple simple pour illustrer l'utilisation de base de @keyframes :

 @keyframes fadein {
  depuis {
    Opacité: 0;
  }
  à {
    Opacité: 1;
  }
}

.fade-in {
  Animation: Fadein 2S Facitage-in;
}

Dans cet exemple, nous définissons une animation appelée fadeIn , qui change progressivement de complètement transparent ( opacity: 0 ) à l'opacité complètement ( opacity: 1 ). Nous appliquons ensuite cette animation à un élément avec un fade-in de classe, définissons la durée d'animation à 2 secondes et utilisons ease-in comme effet de transition.

Maintenant, explorons plus de conseils d'utilisation de @keyframes en profondeur et de certaines applications avancées.

Tout d'abord, nous pouvons utiliser @keyframes pour créer des animations de boucle, ce qui est très utile lors de la création d'indicateurs de charge ou d'animations d'arrière-plan:

 @keyframes spin {
  depuis {
    Transformer: Rotation (0deg);
  }
  à {
    transformée: rotation (360deg);
  }
}

. Téléchargement-spinner {
  Animation: Spin 1s linéaire infini;
}

Dans cet exemple, l'animation spin fait tourner les éléments en continu, et le mot-clé infinite garantit que l'animation boucle infiniment. linear assure une vitesse de rotation constante et n'a pas pour effet d'accélération et de décélération comme ease-in .

Lorsque vous utilisez @keyframes , nous devons également faire attention aux performances des animations. Une animation trop complexe peut conduire à une dégradation des performances des pages, en particulier sur les appareils mobiles. Pour optimiser les performances, nous pouvons utiliser will-change pour inviter le navigateur quelles propriétés changeront, afin de se préparer à l'avance:

 @KeyFrames Slidein {
  depuis {
    Transform: Translatex (-100%);
  }
  à {
    transformée: tradlatex (0);
  }
}

.slide-in {
  Volonté: Transformer;
  Animation: Slidein 0.5S Spow-out;
}

Ici, nous utilisons will-change: transform pour dire au navigateur que transform changera, ce qui aide à améliorer la douceur de l'animation.

Un autre aspect à considérer est l'accessibilité des animations. L'animation peut provoquer une gêne parmi certains utilisateurs, en particulier celles souffrant d'épilepsie ou de troubles dysmotiques. Pour ce faire, nous pouvons utiliser la requête multimédia prefers-reduced-motion pour détecter les préférences des utilisateurs et ajuster l'animation en conséquence:

 @keyframes fadein {
  depuis {
    Opacité: 0;
  }
  à {
    Opacité: 1;
  }
}

.fade-in {
  Animation: Fadein 2S Facitage-in;
}

@Media (préfert-réduisant le mouvement: réduire) {
  .fade-in {
    Animation: aucun;
  }
}

Avec ce paramètre, nos animations seront désactivées lorsque l'utilisateur permet l'option de réduction de mouvement, améliorant ainsi l'accessibilité de la page Web.

Dans les projets réels, j'ai constaté que @keyframes peut être utilisé en conjonction avec les variables CSS (propriétés personnalisées) pour obtenir un contrôle d'animation plus flexible. Par exemple, nous pouvons définir une animation de changements de couleur et utiliser les variables CSS pour contrôler la couleur:

 :racine {
  --Start-Color: # FF0000;
  --end-couleur: # 00FF00;
}

@KeyFrames ColorChange {
  depuis {
    Color d'arrière-plan: var (- start-color);
  }
  à {
    Color d'arrière-plan: var (- terminal-couleur);
  }
}

.Color-Change {
  Animation: Alter Infinite facilitateur de ColorChange 3S;
}

Dans cet exemple, nous utilisons les variables CSS pour définir les couleurs de début et de fin de l'animation, afin que l'effet d'animation puisse être facilement ajusté sans modifier la règle @keyframes .

Enfin, je veux partager un problème que j'ai rencontré: lors de l'utilisation @keyframes , si l'animation dure trop courte, cela peut entraîner une apparence assez fluide. Pour résoudre ce problème, j'ajuste généralement la durée de l'animation et j'essaie différentes timing-function pour trouver les meilleurs résultats:

 @keyframes rebond {
  0%, 100% {
    Transform: Translatey (0);
  }
  50% {
    Transform: Translatey (-20px);
  }
}

.rebond {
  Animation: Bounce 0.8S Factual-in-Out Infinite;
}

Dans cet exemple, j'ai constaté que la définition du temps d'animation à 0,8 seconde et l'utilisation ease-in-out car la fonction de synchronisation rend l'effet de rebond plus naturel et plus fluide.

En général, @keyframes est un outil puissant et flexible dans CSS, à travers lequel nous pouvons créer une variété d'effets d'animation complexes et convaincants. Grâce à l'introduction et aux exemples de cet article, j'espère que vous pourrez mieux comprendre comment @keyframes est utilisé et appliquer de manière flexible ces techniques dans de vrais projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!