En quoi consiste l’animation CSS ?

L'animation CSS est composée de trois parties : les images clés, les propriétés d'animation et les propriétés CSS. Les images clés sont utilisées pour définir l'état des animations à différentes étapes ; les attributs d'animation sont utilisés pour déterminer la durée de lecture, le nombre de lectures et la fonction à utiliser pour lire les animations ; les attributs CSS sont utilisés pour spécifier l'état des éléments CSS sous différentes images clés. .

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

L'animation CSS est composée de trois parties, à savoir les images clés, les propriétés d'animation et les propriétés CSS.

• Keyframes (images clés) - Définissez l'état de l'animation à différentes étapes.

• Propriétés de l'animation (propriétés) - déterminez la durée de lecture de l'animation, le nombre de fois de lecture et la fonction à utiliser pour lire l'animation, etc. (Peut être comparé aux lecteurs audio et vidéo)

• Attributs CSS - spécifiez l'état des éléments CSS sous différentes images clés.

1. Les images clés

sont spécifiées à l'aide des règles @keyframes, qui peuvent être utilisées 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 l'évolution des 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.

2. Attributs d'animation

Créez une animation via @keyframes, vous avez besoin d'un attribut d'animation (animation) pour appliquer l'animation aux éléments et définir le nombre d'itérations d'animation, s'il faut alterner entre les valeurs de début et de fin, et Indique si l'animation doit s'exécuter ou être mise en pause.

Les attributs d'animation peuvent être compris comme les fonctions associées du lecteur. Un lecteur le plus basique doit avoir : lecture/pause, durée de lecture, ordre de lecture (jeu arrière/avant/alternatif), nombre de boucles, etc.

animation:
[animation-name] [animation-duration] // Nom et durée de l'animation
[animation-timing-function][animation-delay] // Fonction sur le temps (propriétés/t), delay Time
[animation-iteration-count] [animation-direction] // Nombre de lectures, ordre de lecture
[animation-fill-mode] [animation-play-state]; // Définir les styles correspondants et contrôler l'animation avant de jouer ou après l'arrêt de Run ou faites une pause

Syntaxe des propriétés d'image clé + d'animation :

/* 定义动画*/
@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 d'exécution :

'0%', '50%', '100%' sont des sélecteurs d'images clés, chaque sélecteur définit une règle d'image clé. 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. 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;
    }
}

Les sélecteurs d'images clés se composent d'une ou plusieurs valeurs de pourcentage séparées par des virgules ou des mots-clés de et vers. 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.

Vous trouverez ci-dessous 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 de et vers.

@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 à 100px au quart et aux trois quarts du parcours ; l'élément Il monte et descend plusieurs fois dans la boucle d'animation.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!