Heim > Artikel > Web-Frontend > Übergangskürzel mit mehreren Eigenschaften in CSS?

Übergangskürzel mit mehreren Eigenschaften in CSS?

WBOYnach vorne: 2023-09-01 20:21:02927Durchsuche

CSS 中具有多个属性的过渡简写？

Wir können mithilfe von CSS Übergänge zu HTML-Elementen hinzufügen. Bevor wir mit diesem Tutorial beginnen, wollen wir zunächst verstehen, was Übergänge sind. Grundsätzlich liegt ein Übergang vor, wenn ein Element von einem Zustand in einen anderen wechselt. Beispielsweise ändern wir die Abmessungen eines Elements, wenn der Benutzer mit der Maus darüber fährt.

In CSS können wir Übergänge zu Elementen auf zwei Arten hinzufügen. Die erste besteht darin, die vier Eigenschaften „Übergangseigenschaft“, „Übergangsdauer“, „Übergangs-Timing-Funktion“ und „Übergangsverzögerung“ gleichzeitig zu verwenden. Die zweite besteht darin, einfach die CSS-Eigenschaft „transition“ zu verwenden.

Die CSS-Eigenschaft „Übergang“ ist eine Abkürzung für die folgenden CSS-Eigenschaften.

Transition-property – Gibt die CSS-Eigenschaft an, die wir zum Anwenden des Übergangseffekts benötigen. Wenn wir eine Transformation auf alle Eigenschaften anwenden müssen, können wir „all“ als Wert verwenden.
Übergangsdauer – Die Gesamtdauer des Übergangseffekts in Sekunden.
Übergangszeitpunktfunktion – Sie bestimmt, wie der Übergang erfolgen soll. Beispiele für Übergangszeitfunktionen sind „Liner“, „Ease-In“, „Ease-Out“, „Ease-In-Out“ usw.
Übergangsverzögerung – Dies ist die Zeitspanne nach Beginn des Übergangseffekts.

Grammatik

Benutzer können die Übergangskurzschrift mit mehreren CSS-Eigenschaften gemäß der folgenden Syntax verwenden.

element {
   transition: Property duration timing-function delay;
}

In der obigen Syntax ist der erste Wert die Transformationseigenschaft, der zweite Wert die Transformationsdauer, der dritte Wert die Zeitfunktion und der letzte Wert die Transformationsverzögerung.

Beispiel 1

Im Beispiel unten haben wir ein div-Element mit den Abmessungen 200 x 200 und wir haben einen Übergangseffekt hinzugefügt, der 2 Sekunden lang auf der Höhe des div-Elements anhält. Hier beträgt die Konvertierungsverzögerung 0,5 Sekunden und die Timing-Funktion ist „ease-in-out“.

Benutzer können mit der Maus über das div-Element fahren, um den Übergangseffekt zu beobachten. Wir können beobachten, dass die Höhe des div-Elements gleichmäßig und nicht sofort zunimmt.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 500px;
         height: 200px;
         background-color: red;
         color: white;
         font-size: 25px;
         transition: height 2s ease-in-out 0.5s;
      }
      .element:hover {
         height: 400px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
   <div class = "element">
      This div contains the texts.
      <p> Hover over this div and wait to see the changes </p>
   </div>
</body>
</html>

Beispiel 2

Im Beispiel unten hat das div-Element einen anfänglichen linken Rand von 2 Pixel. Wenn der Benutzer mit der Maus über das div-Element fährt, erhöhen wir den linken Rand auf 100 Pixel. Wir haben der CSS-Eigenschaft „margin-left“ des div-Elements einen Übergangseffekt hinzugefügt, der 0,5 Sekunden verzögert und 2 Sekunden anhält.

Bewegen Sie in der Ausgabe den Mauszeiger über das div-Element und es wird in 2 Sekunden um 100 Pixel nach rechts verschoben.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s ease-in-out 0.5s;
      }
      .element:hover {
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the below div and wait to see the changes. </p>
   <div class = "element">
      This div contains the texts.
   </div>
</body>
</html>

Beispiel 3

Im folgenden Beispiel haben wir Übergangseffekte zu mehreren CSS-Eigenschaften hinzugefügt. Hier haben wir einen 2-Sekunden-Übergangseffekt für die CSS-Eigenschaften „margin-left“, „height“, „width“, „background-color“, „color“ und „font-size“ hinzugefügt.

In der Ausgabe können Benutzer beobachten, dass der Übergang aller CSS-Eigenschaften reibungslos erfolgt. Wir können jedoch „all“ als Wert von „transition-property“ verwenden, um Übergänge zu allen Eigenschaften hinzuzufügen.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
      }
      .element:hover {
         margin-left: 100px;
         height: 400px;
         width: 400px;
         background-color: aqua;
         color: black;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the bellow div to see the achennges</p>
   <div class = "element">
      Square div element.
   </div>
</body>
</html>

Benutzer haben gelernt, die CSS-Eigenschaft „Übergang“ zu verwenden, die eine Abkürzung für mehrere CSS-Eigenschaften im Zusammenhang mit Übergängen ist. Hier haben wir in den drei obigen Beispielen gelernt, die CSS-Eigenschaft „transition“ zu verwenden. Im vorherigen Beispiel haben wir Übergangseffekte zu mehreren CSS-Eigenschaften hinzugefügt.

Das obige ist der detaillierte Inhalt vonÜbergangskürzel mit mehreren Eigenschaften in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html Property function margin background transition

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich den HTML/CSS/JavaScript-Quellcode einer Website erhalten?Nächster Artikel：Wie kann ich den HTML/CSS/JavaScript-Quellcode einer Website erhalten?

In Verbindung stehende Artikel

Mehr sehen