Heim >Web-Frontend >CSS-Tutorial >Eine detaillierte Einführung in den Übergangsattributübergang in CSS3-Elementen
ÜbergangAnimation ist die Grundlage der Animation
Bevor wir Animation lernenEigenschaft
Wir müssen zuerst den Übergangseigenschaftenübergang verstehen
Schauen wir uns zunächst ein kleines Beispiel an
<p class="demo"></p>
.demo { width: 100px; height: 100px; background-color: royalblue;}.demo:hover { width: 200px;}
Wenn mein Cursor einen Moment lang über der Demo schwebt
nimmt die Breite 200 Pixel an
Gibt es eine Möglichkeit, die Breite des Elements langsam breiter zu machen, wenn unser Cursor darüber schwebt?
Vor CSS3 konnten wir nur das lästige jsSkriptAber jetzt müssen wir nur noch ein Attribut
hinzufügen, um unser Ziel zu erreichen
.demo { width: 100px; height: 100px; background-color: royalblue; transition: width 1s; /*增*/}.demo:hover { width: 200px;}Übergang Seine Funktion besteht darin, anzugeben, dass, wenn sich bestimmte Stile Ihrer Elemente ändern,
diese Stile können schrittweise zum endgültigen Eigenschaftswert übergehen
mit den folgenden Untereigenschaften
Funktion
transition-delay: Geben Sie die Verzögerungszeit für den Beginn des Auftretens an
Oder schreiben Sie einfach das Schlüsselwort für alle Attribute des Übergangs
alleDer Attributwert des Übergangszeit-Gradienten ist „Anzahl + s“
Stellt den Übergang innerhalb weniger Sekunden dar transition-timing-function ist ein optionaler Attributwert mit den folgenden optionalen Werten:
Linearer Übergang, äquivalent zu Bezier Kurve (0,0, 0,0, 1,0, 1,0)
ease (Standard)
Glatter Übergang, äquivalente Bezier-Kurve (0,25, 0,1, 0,25, 1,0)
Ease-in
von langsam nach schnell, äquivalente Bezier-Kurve (0,42, 0, 1,0, 1,0)
Ease-out
von schnell nach Langsam, entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)
ease-in-out
von langsam über schnell nach langsam, entspricht der Bezier-Kurve(0,42, 0 , 0,58, 1,0)
Schritt-Start
entspricht Schritten(1, Start)
Schritt-
Ende
steps():
Schrittfunktion zweier Parameter. Der erste Parameter ist eine positive
cubic-bezier(num, num, num, num): Spezifischer Bezier-Kurventyp, 4 Werte müssen im Intervall [0, 1] liegen
Die meisten davon verwenden wir nicht. Die am häufigsten verwendeten sind wahrscheinlich unsere Standard-Ease und der lineare Übergang
Alles, was wir tun müssen, ist sie durch Kommas zu trennen
.demo { width: 100px; height: 100px; background-color: royalblue; transition: width 1s linear, height 1s linear, background-color 2s 1s; /*改*/}.demo:hover { width: 200px; height: 200px; background-color: lawngreen; /*改*/}
Ein weiterer Grund für die Verwendung von Übergangsattributen anstelle von Skripten besteht darin, dass
Skriptmethoden, die die Stile mehrerer Elemente ändern, zu Konflikten führen könnenDie Lösung besteht darin, boolVariablen zu verwenden
zu sperren, es ist immer noch sehr mühsamUnser
Übergang
Attribut muss nicht so sehr berücksichtigt werdenElemente beeinflussen sich nicht gegenseitig
Noch etwas zu tun Hinweis: Elemente Der Übergang muss die spezifischen Start- und Endattribute des Stils kennen Beispielsweise wechselt die Breite in unserem Beispiel deutlich von 100 Pixel auf 200 Pixel
Wir haben festgestellt, dass das
width-Attribut keinen Übergang durchführt, wenn der Cursor über dem Element schwebt.
.demo:hover { width: auto; /*改*/ height: 200px; background-color: lawngreen; /*改*/}Am Übergang beteiligte Attribute
Natürlich können nicht alle Stile umgestellt werden
Zum Beispiel, wenn Sie einen <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>
Die folgenden Attribute sind am Übergang beteiligt<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block
display:inline-block
Farbe
Schriftgröße/-stärke
Zeilenhöhe
Rand/Padding-oben/unten/links /right
max/min-height/width
outline-color/width
text-indent/shadow
Sie können sehen, dass dieses Attribut wirklich mächtig ist
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in den Übergangsattributübergang in CSS3-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!