Le meilleur didacticiel CSS3 @keyframes règles en 2024, dans ce didacticiel, vous pouvez apprendre Exemples,support du navigateur,définitions de balises et les instructions,grammaire,exemples en ligne,Exemples,Exemples,Exemples,articles connexes,
Faire un élément div se déplace progressivement 200 pixels:
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Utilisez les règles de @keyframes, vous pouvez créer une animation.
Création d'animation en changeant progressivement le réglage d'un style CSS à l'autre.
Au cours de l'animation, vous pouvez changer les temps définir le style CSS.
L'utilisation se produit lors d'un changement spécifié dans%, ou mot-clé "de" et "à", et ceci est le 0% à 100% identiques.
0% correspond au début de l'animation, 100% lorsque l'animation est terminée.
Pour le support du navigateur optimal, vous devez toujours être définie comme 0% et 100% du sélecteur.
Remarque: Utilisez lapropriété d'animation pour contrôler l'apparence de l'animation est également utilisé pour sélectionner l' animation bind. .
valeur | explication |
---|---|
animationname | Obligatoire. Définir le nom de l'animation. |
keyframes-sélecteur | Obligatoire. La durée du pourcentage de l'animation. Valeur juridique: 0 à 100% Remarque: Vous pouvez utiliser une animation keyframes-sélecteurs. |
css-styles | Obligatoire. Un ou plusieurs attributs légitimes de style CSS |
Beaucoup du sélecteur d'images clés pour ajouter un film:
Changer de nombreux styles CSS dans une animation:
De nombreux sélecteurs keyframe avec de nombreux styles CSS:
CSS3 Tutoriel: CSS3 Animations