que sont les images clés CSS

css keyframes est une règle de CSS3, qui peut être utilisée pour définir le comportement d'une période d'animation CSS et créer des animations simples ; la règle d'image clé est constituée du mot-clé "@keyframe", suivi de l'animation donnée. L'identifiant du nom.

L'environnement d'exploitation de cet article : système Windows10, CSS3, ordinateur Thinkpad T480.

Recommandé : "Tutoriel vidéo CSS"

Que sont les @keyframes CSS ? A quoi ça sert ?

@keyframes est une règle de CSS3 qui peut être utilisée pour définir le comportement d'une période d'animation CSS et créer des animations simples.

Les animations sont similaires aux transitions dans la mesure où elles sont des représentations de la modification de la valeur d'une propriété CSS au fil du temps. La principale différence est que la transition est déclenchée implicitement lorsque la valeur de la propriété change (par exemple, lorsque la valeur de la propriété change au survol), mais l'animation est exécutée explicitement lorsque la propriété animée est appliquée. Par conséquent, les animations doivent afficher des valeurs explicites pour les propriétés animées. Ces valeurs sont définies par les images clés d'animation spécifiées dans la règle @keyframes. Par conséquent, la règle @keyframes consiste en un ensemble de règles de style CSS encapsulées qui décrivent comment les valeurs d'attribut changent au fil du temps.

Ensuite, en utilisant différentes propriétés d'animation CSS, vous pouvez contrôler de nombreux aspects différents de l'animation, notamment le nombre d'itérations de l'animation, si elle alterne entre les valeurs de début et de fin et si l'animation doit s'exécuter ou être mise en pause. . Les animations peuvent également retarder leur heure de début.

Une règle @keyframe est constituée du mot-clé "@keyframe", suivi d'un identifiant donnant le nom de l'animation (qui sera référencée à l'aide de animation-name), suivi d'un ensemble de règles de style (délimitées par accolades) . L'animation est ensuite appliquée à l'élément en utilisant l'identifiant comme valeur de l'attribut animation-name.

Exemples d'utilisation de CSS @keyframes :

1 Définissez l'espace où l'animation se produit

Code HTML :

<div class="container">
  <div class="element"></div>
</div>

2. créer une animation simple

code CSS

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}
.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}
@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3. Effet de course

Dans l'exemple ci-dessus, spécifiez pour l'animation nommée "rebond" cinq images clés. Entre la première et la deuxième image clé (c'est-à-dire entre « 0 % » et « 25 % »), utilisez la fonction de synchronisation d'accélération. Entre la deuxième et la troisième images clés (c'est-à-dire entre « 25 % » et « 50 % »), utilisez la fonction de synchronisation facile, etc. L'effet apparaîtra lorsque l'élément se déplacera de 50 px vers le haut, ralentissant lorsqu'il atteint son point le plus élevé, puis s'accélérant lorsqu'il retombe à 150 px. La seconde moitié de l'animation fonctionne de la même manière, mais ne déplace l'élément que de 25 px. Cette animation crée un effet de rebond qui peut être utilisé pour simuler une animation de balle rebondissante.

Remarque :

Les règles @keyframes ne sont pas mises en cascade ; par conséquent, les animations ne dériveront jamais d'images clés de plusieurs règles @keyframes.

Pour déterminer l'ensemble d'images clés, toutes les valeurs du sélecteur doivent être triées par temps croissant. S'il y a des doublons (par exemple, si nous avons écrit deux règles d'image clé « 50 % » et un bloc de déclaration), la règle @keyframes spécifiera que la dernière image clé est utilisée pour fournir des informations sur l'image clé pour cette période. @keyframes Si plusieurs images clés spécifient la même valeur de sélecteur d'image clé, il n'y a pas de cascade dans la règle.

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!