Maîtriser les concepts d'animation de base CSS

Animation CSS : la magie qui donne de la vitalité et du mouvement aux sites Web

L'animation CSS fonctionne comme par magie, rendant le site Web plus dynamique et attrayant. L'animation vous permet de déplacer facilement les éléments du site Web, de changer leur couleur et de les redimensionner en douceur.

Pour rendre vos animations plus interactives et fluides, vous devez d'abord comprendre les concepts de base de l'animation. Dans cet article, vous apprendrez la syntaxe des règles de base et les propriétés d'animation des animations pour contrôler le comportement des animations.

Commençons ! ?

Pour commencer à utiliser les animations CSS, vous devez connaître deux composants de base :

• @keyframes : Plan d'animation.
• Propriétés de l'animation : Contrôlez les paramètres de l'animation.

@keyframes

Les @keyframes sont une feuille de route pour votre animation, où vous définissez les points de début et de fin de votre animation ainsi que les étapes intermédiaires.

Cela signifie que cette partie définit comment l'animation commence, comment elle se déroule au milieu et comment elle se termine.

Grammaire :

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Par exemple :

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

Dans cet exemple, l'opacité de l'élément commencera à 0 et passera à 1.

Avant de continuer, consultez cet e-book qui fera de vous un expert en animation CSS :

 ? Les essentiels de l'animation CSS : meilleures pratiques, astuces et conseils en matière de performances

Des simples fondus aux animations complexes, cet e-book couvre tout ce dont vous avez besoin pour maîtriser les animations CSS, notamment :

• Fonction de synchronisation
• Processus d'images clés et d'animation
• Optimisation des performances
• Applications du monde réel

Idéal pour les développeurs qui souhaitent créer des animations CSS fluides. Obtenez votre copie maintenant!

Propriétés de l'animation

Afin de personnaliser les animations CSS, différentes propriétés sont utilisées, chacune ayant son propre rôle et définissant le comportement de l'animation.

Les propriétés de l'animation sont appliquées directement aux éléments, définissant le nom de l'animation, la durée, le délai, la direction, etc.

Grammaire :

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

Par exemple :

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

Dans cet exemple, l'élément portant le nom de classe « box » sera initialement invisible et deviendra visible après deux secondes, créant un effet de fondu entrant fluide.

En CSS, vous disposez des propriétés d'animation suivantes :

• nom-animation
• animation-durée
• fonction de synchronisation-animation
• animation-délai
• nombre d'itérations d'animation
• animation-direction
• mode de remplissage-animation
• animation-play-state

Maintenant, comprenons chaque attribut.

nom-animation

Fonction :

Cet attribut est utilisé pour définir quelle animation @keyframes doit être appliquée.

Par exemple, si vous avez deux @keyframes nommées fadeIn ou fadeOut, vous pouvez utiliser l'attribut animation-name pour définir sur quel élément l'animation fadeIn doit être appliquée et sur quel élément l'animation fadeOut doit être appliquée.

Grammaire :

<code>animation-name: animationName;</code>

Par exemple :

<code>animation-name: fadeIn;</code>

L'attribut animation-name est requis pour exécuter des animations.

animation-durée

Fonction :

Cette propriété définit la durée de l'animation, c'est-à-dire combien de temps il faut pour que l'animation s'exécute.

Vous pouvez définir la durée de l'animation en secondes (s) ou millisecondes (ms).

Grammaire :

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Par exemple :

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

Si vous ne définissez pas la durée de l'animation, elle sera automatiquement définie sur 0s (valeur par défaut), ce qui invalidera effectivement l'animation.

fonction de synchronisation-animation

Fonction :

Cet attribut permet de définir le mode vitesse de l'animation. Cela signifie que vous pouvez utiliser cette propriété pour définir si l'animation démarre lentement, s'exécute à une vitesse constante ou s'exécute rapidement.

Il a les valeurs suivantes :

• linéaire : L'animation se déroulera à une vitesse constante.
• facilité : commence lentement, vite au milieu et se termine lentement.
• facilité : commencez lentement.
• facilité : terminez lentement.
• facilité d'entrée : démarrage lent et fin lente.
• cubic-bezier(x1, y1, x2, y2) : mode vitesse personnalisé.

Exemple :

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

animation-délai

Fonction :

Cette propriété définit combien de temps l'animation attendra avant de démarrer, c'est à dire le délai de l'animation.

Grammaire :

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

Exemple :

<code>animation-name: animationName;</code>

nombre d'itérations d'animation

Fonction :

Cet attribut permet de définir le nombre de répétitions de l'animation, c'est-à-dire combien de fois l'animation sera répétée.

Il a les valeurs suivantes :

• 1 : L'animation ne s'exécutera qu'une seule fois (c'est la valeur par défaut).
• infini : L'animation se répétera en continu.
• N'importe quel nombre : l'animation s'exécutera le nombre de fois que vous définissez.

Exemple :

<code>animation-name: fadeIn;</code>

animation-direction

Fonction :

Cette propriété définit la direction de l'animation.

Il a les valeurs suivantes :

• normal : L'animation se déroulera vers l'avant (c'est la valeur par défaut).
• reverse : l'animation se déroulera à l'envers.
• alternatif : l'animation s'exécutera alternativement, une fois en avant et une fois en arrière.
• alternate-reverse : l'animation s'exécutera d'abord en sens inverse, puis en avant.

Exemple :

<code>animation-duration: time;</code>

mode de remplissage-animation

Fonction :

Cet attribut est utilisé pour définir le style de l'élément avant le début et après la fin de l'animation. Il définit les styles qui doivent être appliqués à l'élément lorsque l'animation n'est pas en cours de lecture.

Il vous permet de contrôler l'apparence des éléments avant et après l'animation, vous donnant plus de flexibilité dans la gestion de l'état des éléments pendant l'animation.

Il a les valeurs suivantes :

• aucun : aucun style n'est appliqué avant ou après l'animation.
• forwards : préserve le style de fin de l'animation.
• en arrière : cela appliquera également le style de départ de l'animation dans le délai imparti.
• les deux : gérez les styles de début et de fin.

Exemple :

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

animation-play-state

Fonction :

Cet attribut précise l'état de l'animation : en cours d'exécution ou en pause.

Il a les valeurs suivantes :

• Running: L'animation se poursuivra.
• USUSED: L'animation s'arrêtera, mais elle sera conservée.

Exemple:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

Cet attribut est utilisé pour l'animation interactive, par exemple, la suspension de l'animation lors de la volonté.

Animation Brief Fiction Speed ​​

L'abréviation d'animation vous permet de définir plusieurs attributs d'animation en une seule ligne. Vous pouvez les combiner en ligne pour améliorer la lisibilité, plutôt que d'écrire chaque attribut d'animation un par un.

Grammaire:

Exemple:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

ici,

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

Slide: le nom de l'animation.

3S: La durée de l'animation est de 3 secondes.

• Facilité-entrée: la fonction de synchronisation est la facilité de sortie, ce qui signifie que l'animation commencera lentement, accélérera, puis ralentira à nouveau.
• 1s: L'animation commencera après 1 seconde de retard.
• Infinite: L'animation sera répétée à l'infini.
• Alternate: l'animation alternera entre l'avant et l'arrière dans chaque itération.
• Forward: Une fois l'animation terminée, le style du dernier cadre clé (à 100%) sera conservé.
Table de vérification de la vitesse d'animation
J'ai créé une table de contrôle de vitesse d'animation CSS

, qui couvre tous les concepts, attributs et grammaire clés utilisés dans l'animation CSS.

Vous pouvez télécharger la vitesse sur github en cliquant sur le lien ci-dessous pour vérifier le tableau:

https://www.php.cn/link/02f5df8adf026d38425594e68a007

c'est tout. J'espère que cela vous aidera.

Merci d'avoir lu.

Si vous pensez que mon article est utile et que vous souhaitez soutenir mon travail, envisagez de me demander d'avoir une tasse de café.

Pour plus de tel contenu, veuillez cliquer ici.

Suivez-moi sur X (Twitter) et obtenez des compétences quotidiennes de développement Web.

Continuer le codage! Intersection

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!