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

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

青灯夜游original: 2022-01-12 17:27:572954parcourir

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

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>

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

(Partage vidéo d'apprentissage : css tutoriel vidéo)

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!

html5 css css3 count 循环 Property function 对象 transform transition @keyframes animation

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：33 codes JavaScript sur une ligne très pratiques, il est recommandé de les collecter !Article suivant：33 codes JavaScript sur une ligne très pratiques, il est recommandé de les collecter !

Articles Liés

Voir plus