Quelles règles en CSS3 sont utilisées pour définir les animations

Utilisez la règle "@keyframes" en CSS3 pour définir des animations. La règle "@keyframes" est utilisée pour spécifier des règles d'animation, qui définissent le comportement d'un cycle d'animation CSS et peuvent créer des animations simples ; des étapes intermédiaires au cours du cycle de séquence d'animation peuvent être spécifiées en établissant des images clés le long de la séquence d'animation.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

@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.

Syntaxe :

@keyframes animation-name {keyframes-selector {css-styles;}}

• animation-name : Ceci est obligatoire, il définit le nom de l'animation.

• keyframes-selector : Définit le pourcentage d'animation, il est compris entre 0% et 100%. Une animation peut contenir de nombreux sélecteurs.

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}
/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;
    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

Entre accolades, définissez des images clés ou des waypoints qui spécifient la valeur de la propriété à animer à certains moments de l'animation. Cela vous permet de contrôler les étapes intermédiaires de la séquence d'animation. Par exemple, une simple @keyframe animée pourrait ressembler à ceci : "

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%" et "100%" sont des sélecteurs d'images clés, chacun définissant une règle d'image clé pour une règle d'image clé. Les blocs sont constitués d'attributs et. valeurs Vous pouvez également utiliser les mots-clés du sélecteur from et to au lieu de 0% et 100% respectivement, car ils sont équivalents. Le sélecteur se compose d'une ou plusieurs valeurs de pourcentage séparées par des virgules ou des mots-clés from et to. Le spécificateur d'unité de pourcentage doit être utilisé pour la valeur de pourcentage. Par conséquent, « 0 » est un sélecteur d'image clé non valide :

tutoriel vidéo CSS

)

Remarque : pour une meilleure prise en charge du navigateur, spécifiez toujours le 0. Sélecteurs % et 100%. >Exemples d'utilisation de css @keyframes :

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

Code HTML :

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

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

code CSS

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

3. >

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation

 !

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!