Wie man CSS3 Transition-Animation verwenden

Es ist bereits möglich, CSS-Eigenschaften on the fly durch Pseudo-Klassen (wie Schweben) oder mit javascript-Code zu ändern. Vor CSS3, alle CSS-Statusänderungen passiert sofort. Mit dem neuen Übergang Attribut können Sie Übergänge verursachen im Laufe der Zeit geschehen.

bild0.jpg

Blick auf eine einfache h1 Überschrift:

Transition Demo

Der CSS-Code ist in erster Linie ganz einfach:

 h1 {color: black font-size: 300% - Übergang: Farb 1s einfache Ein-} h1: hover {color: rot-}

Beginnen Sie damit, die ignoriert Übergang Attribut. Wenn man sich den Rest des Codes aussehen, dann ist es leicht zu sehen, was es tut. Im Normalzustand ist die Überschrift schwarz. Im Schwebezustand ist die Farbe rot. Normalerweise stellt sich die Überschrift rot, sobald die Maus darüber bewegt, und wird sofort schwarz, wenn die Maus Blätter.

Wenn jedoch die Übergang Attribut hinzugefügt wird, die Farbänderung ist nicht sofort, sondern nimmt eine Sekunde. Die Farbe ändert sich allmählich von schwarz auf rot und zurück.

Übergänge sind noch interessanter, wenn man sie mit Transformationen koppeln. Stellen Sie sich eine sehr einfache div:

Box 1

Tragen Sie ein wenig CSS3 Magie und wenn der Benutzer schwebt über der div, es dreht sich glatt, bis es dem Kopf steht. Wenn der Benutzer verlässt der div, es dreht sich sanft in seine ursprüngliche Position zurück:

 #box {Übergang: alle 1s einfache Ein- Höhe: 100px; width: 100px; border: 1px solid schwarz-} #box: hover {verwandeln: drehen (180 °) -}

Das verwandeln wird in der festgelegt: schweben Pseudo-Klasse. Der einzige neue Element ist der Übergang in die Standard-Stil "Klasse angegeben.

Das Übergang Attribut nimmt mehrere Parameter:

  • Animationseigenschaft: Die Art der Animation von diesem Tag definiert. Der Standardwert ist alle, aber auch andere Arten erwartet zu arbeiten, einschließlich Farbe, Länge, Breite, pecentage, Opazität, und Nummer. Im Zweifelsfall verwenden Sie den Standard alle.

  • Dauer: Die Länge der Animation in Sekunden. Eine Sekunde ist 1s.

  • Timing-Funktion: Wenn Sie die Animation zu treten mit einer konstanten Geschwindigkeit wollen, verwenden. Wenn Sie möchten, eine natürliche Bewegung, die allmählich beschleunigt und verlangsamt an den Enden der Animation unten, verwenden Sie eine der folgenden Möglichkeiten: Leichtigkeit, Leichtigkeit-im, Leichtigkeit-out, Leichtigkeit-in-out.

  • verzögern: Wenn Sie einen zweiten Zeitwert zu beinhalten, wird dies eine Verzögerung in Betracht gezogen werden. Die Animation wird erst nach der Verzögerung beginnen.

Wenn Sie möchten, können Sie einzelne Eigenschaften für die verschiedenen Teile der Animation verwenden, aber die meisten Entwickler bevorzugen die einzeilige Abkürzung (wie das für Grenzen verwendet).

Nicht alle CSS-Attribute können animiert werden, aber viele können sein. Es kann einige Experimente erfordern, welche CSS-Attribute bestimmen kann, mit der animiert werden Übergang Attribut.

Leider ist das Lager Übergang Attribut wird nicht von gängigen Browsern unterstützt, aber es gibt herstellerspezifische Versionen für Mozilla (-moz-), Webkit (-webkit) Und Opera (-O-). Ihre beste Wette, bis Unterstützung weit verbreitet ist, alle herstellerspezifischen Versionen zusätzlich zur Standard-Version enthalten.

Menü