Maison > Article > interface Web > Quel est le nom de l'effet de transition en CSS3

Quel est le nom de l'effet de transition en CSS3

WBOYoriginal: 2022-01-24 10:32:562347parcourir

En CSS3, le nom de l'effet de transition est "transition". Cet attribut est un attribut d'abréviation, qui est utilisé pour spécifier le nom de l'attribut CSS de l'effet de transition, le temps de l'effet de transition, la courbe de vitesse de l'effet de transition. et quand démarrer l'effet de transition Syntaxe C'est "transition: nom de l'attribut css début de transition de la courbe de vitesse de temps;".

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

Quel est le nom de l'effet de transition du CSS3 ?

La propriété de transition est une propriété d'abréviation utilisée pour définir quatre propriétés de transition :

transition-property
transition-duration
transition-timing-function
transition-delay

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

La syntaxe est:

Transition: Propriété Durée Duming-Function Délai;

où:

Quel est le nom de leffet de transition en CSS3

L'exemple est le suivant:

<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>

output Résultat:

Quel est le nom de leffet de transition en CSS3

(Partage vidéo d'apprentissage: 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir le nœud du fichier HTML en javascriptArticle suivant：Comment obtenir le nœud du fichier HTML en javascript

Articles Liés

Voir plus