Maison > Article > interface Web > Comment utiliser l'attribut de transition
Comment utiliser l'attribut de transition
- 青灯夜游original
- 2019-01-30 14:44:497218parcourir
L'attribut de transition en CSS3 est un attribut raccourci utilisé pour obtenir des effets de transition. Il définit le nom de la propriété CSS, l'heure d'achèvement, la courbe de vitesse et l'heure de début qui doivent être définis pour l'effet de transition.
Attribut de transition CSS3
Fonction : Définir l'attribut de transition du element
Description : Attribut composite. Récupère ou définit la transition lorsque l'objet est transformé. Utilisé pour définir quatre propriétés de transition : transition-property, transition-duration, transition-timing-function, transition-delay.
Syntaxe :
transition: property duration timing-function delay;
transition-property : spécifie le nom de la propriété CSS qui définit l'effet de transition.
transition-duration : Spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition.
transition-timing-function : Spécifie la courbe de vitesse de l'effet de vitesse.
transition-delay : Définit le moment où l'effet de transition commence.
Exemple d'utilisation de l'attribut de transition CSS3
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Rendu :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!