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

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

青灯夜游

Libérer： 2022-03-15 17:26:34

original

3003 Les gens l'ont consulté

Les attributs liés à l'animation incluent : transformation, transformation-origin, transition, "@keyframes", animation, animation-name, animation-duration, animation-delay, etc.

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

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

css3 a trois animations : transformation, transition, animation

1, transformation (attribut de conversion 2D/3D)

property	description	CSS
transformer	Adapté pour les éléments transformés en 2D ou 3D	3
transform-origin	Vous permet de modifier la position de l'élément transformé	3
transform-style	Spécifiez comment imbriquer les éléments dans l'espace 3D	3
perspective	Spécifiez comment l'élément 3D est visualisé en perspective	3
perspective-origin	Spécifiez la position inférieure de l'élément 3D	3
backface-visibility	Définition Qu'il s'agisse d'un l'élément devrait Il est visible lorsqu'il n'est pas face à l'écran	3

2 transition (attribut de transition)

attribut	description	CSS
transition.	Cet attribut est transition -Forme abrégée pour propriété, durée de transition, fonction de synchronisation de transition, délai de transition.	3
transition-property	Définissez la propriété CSS utilisée pour la transition.	3
transition-duration	Définissez la durée pendant laquelle la transition aura lieu.	3
transition-timing-function	Définissez la fonction de synchronisation pour la transition.	3
transition-delay	Spécifiez l'heure à laquelle la transition commence.	3

3, animation (attribut d'animation)

attribut	description	CSS
@keyframes	Définir une animation, le nom de l'animation défini par @keyframes doit être utilisé par animation-name.	3
animation	Attributs composites. Récupère ou définit les effets d’animation appliqués à l’objet.	3
animation-name	Récupère ou définit le nom de l'animation appliqué à l'objet Il doit être utilisé avec la règle @keyframes, car le nom de l'animation est défini par @keyframes	3
animation. -duration	Récupération Ou définir la durée de l'animation de l'objet	3
animation-timing-function	Récupérer ou définir le type de transition de l'animation de l'objet	3
animation-delay	Récupérer ou définir le temps de retard de l'animation de l'objet	3
animation-iteration-count	Récupérer ou définir le nombre de boucles de l'animation de l'objet	3
animation-direction	Récupérer ou définir si l'animation de l'objet se déplace en marche arrière dans la boucle	3
animation-play-state	Récupérer ou définir l'état de l'animation de l'objet	3

Exemple :

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

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copier après la connexion

Quelles sont les propriétés associées à lanimation CSS3 ?