Quelles règles personnalisées sont utilisées pour l'animation CSS3 ?

L'animation CSS3 utilise "@keyframes" pour personnaliser les règles. "@keyframes" peut spécifier des règles d'animation et définir le comportement d'une période d'animation CSS. La syntaxe est "@keyframes animation name {keyframes-selector {css-styles;}}".

L'environnement d'exploitation de ce tutoriel : système Windows7, 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 règles @keyframes sont composées d'un ensemble de règles de style CSS encapsulées qui décrivent comment les valeurs d'attribut changent au fil du temps.

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

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

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 des accolades). L'animation est ensuite appliquée à l'élément en utilisant l'identifiant comme valeur de l'attribut animation-name.

Syntaxe :

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

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

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

À 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;
}

'0%', '50%', '100%' sont tous des sélecteurs d'images clés, et 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. 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.

Exemple de règle d'animation spécifiée par CSS @keyframes :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/* Safari and Chrome */
			}

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

(Partage vidéo 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!