Quelles sont les quatre propriétés liées à l'animation CSS3 ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-01-17 18:49:45

original

2153 Les gens l'ont consulté

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.

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

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 à lanimation 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>

Copier après la connexion

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