L'attribut de transition CSS est un attribut abrégé. Sa syntaxe est transition : propriété durée timing-function delay, qui est utilisée pour définir quatre attributs de transition.
Comment utiliser l'attribut de transition CSS ?
Fonction :
La propriété de transition est une propriété abrégée permettant de définir quatre propriétés de transition : transition-property transition-duration transition-timing-function transition -delay
Syntaxe :
transition: property duration timing-function delay;
Description :
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.
Remarque : veuillez toujours définir l'attribut transition-duration, sinon la durée sera de 0 et aucun effet de transition ne sera produit.
Exemple d'utilisation de l'attribut de transition CSS
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
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>Sortie d'effet :
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!
La différence entre vue3.0 et 2.0
La différence entre MongoDB et MySQL
Comment lire la base de données en HTML
Comment utiliser la fonction Print() en Python
Quel système oa est le meilleur ?
tutoriel CSS3
Qu'est-ce qu'une connexion directe indépendante ?
Comment connecter PHP à la base de données mssql
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
