Comment utiliser l'attribut de transition-tutoriel CSS-php.cn

Comment utiliser l'attribut de transition

青灯夜游

Libérer： 2019-02-11 14:02:26

original

7351 Les gens l'ont consulté

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.

Comment utiliser l'attribut 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;

Copier après la connexion

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>

Copier après la connexion

Rendu :

Comment utiliser lattribut de transition

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!