Heim > Web-Frontend > CSS-Tutorial > Was ist die Verwendung von Transition in CSS3?

Was ist die Verwendung von Transition in CSS3?

WBOY
Freigeben: 2021-12-21 16:56:29
Original
2509 Leute haben es durchsucht

In CSS3 wird das Übergangsattribut zum Festlegen des Elementübergangseffekts verwendet. Es handelt sich um ein abgekürztes Attribut mit der Syntax „Übergang:Eigenschaftsdauer, Zeitfunktion, Verzögerung“. Der Attributwert legt den Attributnamen, die Zeit, die Geschwindigkeit und die Verzögerung fest Zeitpunkt des Elementübergangs.

Was ist die Verwendung von Transition in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wozu dient der Übergang in CSS3?

In CSS ist das Übergangsattribut „Übergang“, mit dem der Übergangseffekt eines Elements festgelegt wird. Das

transitärsattribut legt den Übergangseffekt des Elements fest.

  • Sie werden verwendet, um den Attributnamen, die Übergangszeit, die Übergangsgeschwindigkeitskurve und die Übergangsverzögerungszeit des Elementübergangseffekts festzulegen.

    Die Syntax lautet:
  • transition: property duration timing-function delay;
    Nach dem Login kopieren
  • Das Beispiel lautet wie folgt:

    <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>
    Nach dem Login kopieren
    Ausgabeergebnis:
  • (Lernvideo-Sharing:

    CSS-Video-Tutorial

    )

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Transition in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage