Maison  >  Article  >  interface Web  >  Combien de propriétés de transition y a-t-il en CSS3 ?

Combien de propriétés de transition y a-t-il en CSS3 ?

青灯夜游
青灯夜游original
2021-12-14 17:20:162130parcourir

Il y en a 5 : 1. attribut de propriété de transition ; 2. attribut de durée de transition ; 3. attribut de fonction de synchronisation de transition ; 4. attribut de délai de transition ;

Combien de propriétés de transition y a-t-il en CSS3 ?

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

La transition css3 nous permet de passer d'une valeur d'attribut à une autre dans un temps limité.

Il y a 5 attributs de transition en CSS3 :

3 Il y a tellement de codes de transition dans div{}En fait, il vous suffit d'utiliser l'attribut de transition abrégé et d'utiliser deux lignes de code pour l'obtenir :
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}
(Partage vidéo d'apprentissage :
Attribut Description CSS
transition Attribut d'abréviation, utilisé pour définir quatre attributs de transition dans un seul attribut. 3
transition-property Spécifie le nom de la propriété CSS qui applique la transition. 3
transition-duration Définissez la durée de l'effet de transition. La valeur par défaut est 0. 3
transition-timing-function spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ». 3
transition-delay Spécifie quand l'effet de transition commence. La valeur par défaut est 0.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				transition-property: width;
				transition-duration: 1s;
				transition-timing-function: linear;
				transition-delay: 2s;
				/* Safari */
				-webkit-transition-property: width;
				-webkit-transition-duration: 1s;
				-webkit-transition-timing-function: linear;
				-webkit-transition-delay: 2s;
			}

			div:hover {
				width: 200px;
			}
		</style>
	</head>
	<body>

		<div></div>

		<p>鼠标移动到 div 元素上,查看过渡效果。</p>
		<p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p>

	</body>
</html>
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