Maison > interface Web > tutoriel CSS > A quoi sert la transition en CSS3

A quoi sert la transition en CSS3

WBOY
Libérer: 2021-12-21 16:56:29
original
2509 Les gens l'ont consulté

En CSS3, l'attribut de transition transition est utilisé pour définir l'effet de transition de l'élément. Il s'agit d'un attribut abrégé avec la syntaxe "transition:property duration timing-function delay". temps de transition de l’élément respectivement.

A quoi sert la transition en CSS3

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

À quoi sert la transition en CSS3 ?

En CSS, l'attribut de transition est transition, qui est utilisé pour définir l'effet de transition d'un élément. L'attribut

Transition définit l'effet de transition de l'élément.

  • Ils sont utilisés pour définir le nom de l'attribut, le temps de transition, la courbe de vitesse de transition et le temps de retard de transition de l'effet de transition de l'élément.

    La syntaxe est :
  • transition: property duration timing-function delay;
    Copier après la connexion
  • L'exemple est le suivant :

    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    <div></div>
    <p>鼠标移动到 div 元素上,查看过渡效果。</p>
    </body>
    </html>
    Copier après la connexion
    Résultat de sortie :
  • (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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal