Einführung in das neue Übergangsattribut in CSS3 (mit Beispielen)

Der Inhalt dieses Artikels ist eine Einführung in das neue Übergangsattribut in CSS3 (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist.

In CSS3 wurde ein neuer Modulübergang hinzugefügt, der durch einige einfache CSS-Ereignisse Änderungen im Erscheinungsbild von Elementen auslösen kann, wodurch der Effekt empfindlicher wird.
Es handelt sich um ein zusammengesetztes Attribut, das hauptsächlich die folgenden Unterattribute umfasst.

Übergangseigenschaft: Geben Sie die CSS-Eigenschaft des Übergangs oder der dynamischen Simulation an.
Übergangsdauer: Geben Sie die Zeit an, die zum Abschließen des Übergangs erforderlich ist.
Übergangs-Timing-Funktion: Geben Sie die Übergangsfunktion an
Übergangsverzögerung: Geben Sie die Verzögerungszeit für den Beginn des Erscheinungsbilds an.

Zum Beispiel:

transition: background-color .5s ease .1s;

Besonderer Hinweis: Wenn das Attribut „transition-property“ auf „all“ festgelegt ist, stellt es die Attribute von dar alle Mittelpunktwerte.

Beispiel:

width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;

Sie können auch einzelne Eigenschaften festlegen.

Verwandte Empfehlungen:

CSS3-Übergangsattribut_html/css_WEB-ITnose

Detaillierte Erklärung und Beispielfreigabe des Übergangsattributs in CSS3 _CSS/HTML

Das obige ist der detaillierte Inhalt vonEinführung in das neue Übergangsattribut in CSS3 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!