Maison > Article > interface Web > Quelles sont les quatre propriétés liées à l’animation CSS3 ?

Quelles sont les quatre propriétés liées à l’animation CSS3 ?

青灯夜游original: 2022-01-17 16:02:282138parcourir

Css3 définit quatre attributs associés pour l'animation : 1. Attribut de transformation, utilisé pour appliquer une transformation 2D ou 3D aux éléments ; 2. Attribut de transition, utilisé pour obtenir des effets de transition ; 3. Attribut d'animation, utilisé pour lier l'animation aux éléments. "@keyframes" définit le comportement d'un cycle d'animation.

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

En général, il n'y a que trois propriétés de l'animation CSS3 : transformation, transition et animation. L'attribut

transformtransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

<strong>animation</strong> 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

animation 属性需要和@keyframes规则一起使用，才可创建动画。

<strong>@keyframes</strong> applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

transition

La propriété est une propriété abrégée permettant de définir quatre propriétés de transition :

transition-property
li>
durée de transition
fonction de synchronisation-de transition
délai de transition

Le

La propriété animation

est une propriété raccourcie permettant de définir six propriétés d'animation : Quelles sont les quatre propriétés liées à l’animation CSS3 ?

animation-name

animation -durée

animation-timing-function🎜
🎜animation-delay🎜
🎜animation-iteration-count🎜
L'attribut 🎜animation-direction🎜

🎜animation doit être utilisé avec les règles @keyframes pour créer des animations. 🎜🎜🎜@keyframes🎜🎜 Règles🎜🎜🎜Avec les règles @keyframes, vous pouvez créer des animations. 🎜🎜Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. 🎜🎜Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours du processus d'animation. 🎜🎜Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 🎜🎜0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. 🎜🎜Pour une meilleure prise en charge du navigateur, vous devez toujours définir les sélecteurs 0 % et 100 %. 🎜

<!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 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir le jour de la semaine d'aujourd'hui avec JavaScriptArticle suivant：Comment obtenir le jour de la semaine d'aujourd'hui avec JavaScript

Articles Liés

Voir plus