Maison >interface Web >tutoriel CSS >A quoi sert la transition en CSS3

A quoi sert la transition en CSS3

WBOYoriginal: 2021-12-21 16:56:292522parcourir

En CSS3, l'attribut de transition transition est utilisé pour définir l'effet de transition de l'élément. Il s'agit d'un attribut abrégé avec la syntaxe "transition:property duration timing-function delay". temps de transition de l’élément respectivement.

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

À quoi sert la transition en CSS3 ?

En CSS, l'attribut de transition est transition, qui est utilisé pour définir l'effet de transition d'un élément. L'attribut

Transition définit l'effet de transition de l'élément.

Ils sont utilisés pour définir le nom de l'attribut, le temps de transition, la courbe de vitesse de transition et le temps de retard de transition de l'effet de transition de l'élément.
La syntaxe est :

transition: property duration timing-function delay;

L'exemple est le suivant :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>

Résultat de sortie :

(Partage vidéo d'apprentissage :
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!

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：L'explication détaillée la plus facile à comprendre de l'attribut CSS float (images et texte détaillés)Article suivant：L'explication détaillée la plus facile à comprendre de l'attribut CSS float (images et texte détaillés)

Articles Liés

Voir plus