Combien de propriétés de transition y a-t-il en CSS3 ?-Questions et réponses frontales-php.cn

Combien de propriétés de transition y a-t-il en CSS3 ?

青灯夜游

Libérer： 2021-12-15 13:39:42

original

2167 Les gens l'ont consulté

Il y en a 5 : 1. attribut de propriété de transition ; 2. attribut de durée de transition ; 3. attribut de fonction de synchronisation de transition ; 4. attribut de délai de transition ;

Combien de propriétés de transition y a-t-il en CSS3 ?

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

La transition css3 nous permet de passer d'une valeur d'attribut à une autre dans un temps limité.

Il y a 5 attributs de transition en CSS3 :

3 Il y a tellement de codes de transition dans div{}En fait, il vous suffit d'utiliser l'attribut de transition abrégé et d'utiliser deux lignes de code pour l'obtenir :

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

Copier après la connexion

(Partage vidéo d'apprentissage :

Attribut	Description	CSS
transition	Attribut d'abréviation, utilisé pour définir quatre attributs de transition dans un seul attribut.	3
transition-property	Spécifie le nom de la propriété CSS qui applique la transition.	3
transition-duration	Définissez la durée de l'effet de transition. La valeur par défaut est 0.	3
transition-timing-function	spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ».	3
transition-delay	Spécifie quand l'effet de transition commence. La valeur par défaut est 0.	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; } div:hover { width: 200px; } </style> </head> <body> <div></div> <p>鼠标移动到 div 元素上，查看过渡效果。</p> <p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p> </body> </html> Copier après la connexion

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!