Maison > Article > interface Web > Combien de types de propriétés de transition CSS3 existe-t-il ?

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

青灯夜游original: 2022-03-18 16:58:163129parcourir

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

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>

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

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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 Property function transition

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：Comment définir l'animation pour qu'elle soit lue après quelques secondes en CSS3Article suivant：Comment définir l'animation pour qu'elle soit lue après quelques secondes en CSS3

Articles Liés

Voir plus