Que sont les @keyframes de CSS3

Le contenu de cet article est de vous présenter ce qu'est les @keyframes de css3, afin que vous puissiez simplement comprendre comment les @keyframes peuvent être utilisées. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Que sont les @keyframes CSS3 ? 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. [Tutoriels vidéo associés recommandés : Tutoriel CSS3]

Les animations sont similaires aux transitions dans la mesure où elles représentent toutes deux des valeurs qui modifient les propriétés 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. Par exemple :

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Qu'y a-t-il à l'intérieur des accolades de la règle @keyframes ?

À l'intérieur des accolades, nous devons définir des images clés ou des waypoints qui spécifient la valeur de la propriété animée à un moment précis de l'animation. Cela nous permet de contrôler les étapes intermédiaires de la séquence d'animation. Par exemple, une simple @keyframe animée peut ressembler à ceci :

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Effet de course :

'0%', '50%', '100%' sont des sélecteurs d'images clés, chaque sélecteur définit une règle d'images clés. Le bloc de déclaration d'image clé d'une règle d'image clé se compose d'attributs et de valeurs.

L'animation ci-dessus ressemble à un simple effet de transition : la couleur d'arrière-plan change à partir d'une valeur (0%) au début de l'animation, atteignant une valeur (50%) au milieu, et atteignant une autre valeur ( 100) à la fin de l'animation %). Les sélecteurs d'images clés « 0 % », « 50 % » et « 100 % » définissent les waypoints ou les points de pourcentage auxquels vous souhaitez que la propriété animée change de valeur. Nous pouvons également utiliser les mots-clés du sélecteur from, to au lieu d'utiliser respectivement 0% et 100%, ils sont équivalents.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    	background-color: red;
    }
}

Le sélecteur d'images clés se compose d'une ou plusieurs valeurs de pourcentage séparées par des virgules ou des mots-clés from et to. Notez que le spécificateur d’unité de pourcentage doit être utilisé pour les valeurs de pourcentage. Par conséquent, « 0 » est un sélecteur d’image clé non valide.

Ce qui suit est un exemple d'animation avec un sélecteur d'images clés qui inclut plusieurs valeurs de pourcentage séparées par des virgules et/ou les sélecteurs d'images clés de mots clés from et to.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

La règle @keyframes ci-dessus définit : Le décalage supérieur de l'élément sera égal à zéro au début, à mi-chemin et à la fin de l'animation, et il sera égal au quart et aux trois quarts du way est égal à 100px cela signifie que l'élément monte et descend plusieurs fois pendant la boucle d'animation.

Un exemple de création d'une animation simple à l'aide des règles @keyframes :

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

Code HTML :

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

2. Utilisez les règles @keyframes pour créer des animations simples

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, cinq images clés sont assignées à l'animation nommée "rebond". Entre la première et la deuxième images clés (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.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!