de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Steuern der CSS3-Animation mit der Funktion steps ()

Animation ist eine der großartigsten Funktionen, die in CSS eingeführt wurden. In der Vergangenheit war Webanimation nur im JavaScript- oder Flash-Bereich verfügbar. Aber heute entscheiden sich viele Websites für CSS, um subtile Animationen hinzuzufügen . In früheren Artikeln haben wir einige Dinge mit CSS-Animationen durchgespielt, wie das Hinzufügen eines Marquee-Effekts und das Hinzufügen eines Bounce-Effekts zu etwas.

In diesem Artikel werden wir wieder in die CSS-Animation eintauchen. Dieses Mal diskutieren wir eine CSS-Animationsfunktion, steps(), mit der wir die Bewegung der Animation steuern können - nicht ausflippen, es ist nicht so rätselhaft wie es klingt. Lass uns einen Blick darauf werfen.

Also, was ist es?

Normalerweise wird die Animation in CSS direkt von Anfang bis Ende in der angegebenen Dauer ausgeführt. steps() ist Teil der Timing-Funktion der Animation. Es erlaubt uns, die Animation so zu steuern, dass sie sich schrittweise bewegt. Das beste Beispiel dafür, wie die steps() funktioniert, wäre der Sekundenzeiger einer analogen Uhr; Der Sekundenzeiger der Uhr bewegt sich nicht kontinuierlich, sondern seine Bewegungen sind in Stufen unterteilt. Also replizieren wir es mit CSS-Animation und steps() .

Replizieren der zweiten Hand einer Uhr

Fügen wir zunächst die Keyframes hinzu, die den Sekundenzeiger um 360 Grad drehen. Die Rotation beginnt bei 90 Grad (oder bei 12 Uhr). Beachten Sie, dass der folgende Code möglicherweise ein Präfix ( -moz-, -o- und -ms- ) benötigt, um in verschiedenen Browsern zu funktionieren.

 @ -Webkit-Keyframes Drehung {von {umwandeln: drehen (90 Grad); } zu {umwandeln: rotieren (450 deg); }} 

Der Sekundenzeiger bewegt sich jede Sekunde gleichmäßig und vollendet eine 360-Grad-Drehung in 60 Sekunden. Also, hier werden wir die Animationsdauer für 60s einstellen und dies weist den Browser an, es in 60 Schritten mit steps(60) zu vervollständigen.

 .second {Animation: Drehung 60s Schritte (60) unendlich; Transformationsursprung: 100% 50%; // Stile Dekoration Hintergrundfarbe: # e45341; Höhe: 2px; Rand oben: -1px; Position: absolut; oben: 50%; Breite: 50%; } 

Wir haben dafür zwei Demos erstellt; eins mit steps() und eins mit linear . Sie können die verschiedenen Bewegungen von diesem Screenshot unten sehen.

An diesem Punkt können Sie hoffentlich herausfinden und sich vorstellen, wie steps() funktioniert. Um die Demo in Aktion zu sehen, folgen Sie diesem Link unten.

  • Demo anzeigen
  • Quelle herunterladen

Mehr Inspiration ...

Außerdem haben wir hier ein paar tolle Experimente und Demonstrationen gesammelt, die steps() von vielen Webentwicklern auswerten. Schaut sie euch an und ich hoffe, dass ihr euch davon inspirieren könnt.

  • Pure CSS3 Eingabeanimation mit Schritten () von Lea Verou
  • Cat Walk von Rachel Nabors
  • Ken's Street Fighter II von David Walsh

8 Tech-Erfindungen, die nichts als nutzlos sind

8 Tech-Erfindungen, die nichts als nutzlos sind

Es ist eine Sache zu wissen, dass eine Tomate eine Frucht ist, und eine andere, um sie in einen Fruchtsalat zu stecken. Obwohl die Menschheit einige der erstaunlichsten Errungenschaften auf dem Gebiet der Technologie erreicht hat, gibt es Momente, in denen unsere kreativen Köpfe dazu neigen, es zu übertreiben, und bevor wir es wissen, mampfen wir Tomaten in unseren Fruchtsalat.F

(Tech- und Design-Tipps)

Frei für kommerzielle Nutzung - eine neue CC0 Stockfoto Website

Frei für kommerzielle Nutzung - eine neue CC0 Stockfoto Website

Cheesy stock photography ist auf dem Weg nach draußen durch Qualität Stock Fotos ersetzt, von denen viele kostenlos heruntergeladen werden können . Ja, es gibt viele bezahlte Foto-Seiten, aber die kostenlosen sind einfacher zu bedienen und zugänglicher mit einem $ 0 Preisschild.Eine der neuesten Sites in dieser Arena ist die FCU, eine Abkürzung für Free For Commercial Use . Es i

(Tech- und Design-Tipps)