Combien de types de propriétés de transition CSS3 existe-t-il ?-Questions et réponses frontales-php.cn

Combien de types de propriétés de transition CSS3 existe-t-il ?

青灯夜游

Libérer： 2022-03-18 16:58:16

original

3199 Les gens l'ont consulté

Il existe 5 types de propriétés de transition CSS3 : 1. transition ; 2. transition-property 3. transition-duration 4. transition-timing-function ;

Combien de types de propriétés de transition CSS3 existe-t-il ?

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

Les transitions CSS vous permettent de modifier en douceur les valeurs des propriétés dans un laps de temps donné.

Il existe 5 types d'attributs de transition CSS3 :

Attribute	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.	3

La transition CSS3 est l'effet d'un élément passant progressivement d'un style à un autre.

Pour y parvenir, deux choses doivent être précisées :

Spécifiez la propriété CSS à laquelle l'effet doit être ajouté
Spécifiez la durée de l'effet.

Exemple :

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

Copier après la connexion

Combien de types de propriétés de transition CSS3 existe-t-il ?