propriété de propriété de transition CSS


  Résultats de traduction：

transition

英 [trænˈzɪʃn] 美 [trænˈzɪʃən, -ˈsɪʃ-]

propriété

英 [ˈprɒpəti] Beauté [ˈprɑ:p ərti]

propriété de propriété de transition CSSsyntaxe

Role : L'attribut transition-property spécifie le nom de la propriété CSS qui applique l'effet de transition. (L'effet de transition commencera lorsque la propriété CSS spécifiée changera). Astuce : Les effets de transition se produisent généralement lorsque l'utilisateur fait flotter le pointeur de la souris sur un élément.

Syntaxe : transition-property: none|all|property;

Description : none Aucune propriété ne bénéficiera de l'effet de transition. Toutes les propriétés recevront l'effet de transition. Property définit une liste de noms de propriétés CSS qui appliquent des effets de transition. La liste est séparée par des virgules.​

Remarque : Veuillez toujours définir l'attribut transition-duration, sinon la durée sera de 0 et il n'y aura pas d'effet de transition.

propriété de propriété de transition CSSexemple

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition-property: width;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Recommandations populaires

Maison

vidéos

Questions et réponses

soumettre