CSS-Animationen

Es gibt viele Programme, mit denen Sie bearbeiten, Montagen erstellen oder sogar erstellen können Animationen, jedes Mal gibt es viele Softwares, die diese Art von interaktiven Projekten hinzufügen. In diesem Beitrag werden wir dir nicht nur die Welt der Animationen vorstellen, sondern dir auch einen neuen Freund vorstellen.

Wie Sie wissen, ist die Computerwelt voll von Befehlen und nützlichen Werkzeugen für die Entwicklung von Webseiten oder Online-Medien, die derzeit nebeneinander existieren. Bleiben Sie bei uns und entdecken Sie in diesem neuen Tutorial eine weitere Möglichkeit, Ihr Niveau mit Computing und Interaktivität zu verbessern.

Was sind Animationen?

Wir möchten, dass Sie vollständig in das Tutorial einsteigen, aber dafür ist es notwendig, in die Welt der Animationen einzutauchen oder, was das Grafikdesign betrifft, die Welt der Interaktives Design. 

Animationen sind auch Teil der audiovisuellen Welt, eigentlich wären sie nichts, wenn oder weil in ihnen ein Audio und ein bewegtes Bild eingeführt werden. Wenn wir von «Animation» sprechen, sprechen wir deshalb von dem, was im Volksmund «Cartoons» genannt wird.

Wie oben zusammengefasst, entsteht Animation aus der Fähigkeit, etwas in Bewegung zu setzen, in diesem Fall Cartoons. Aber wie werden all diese Bewegungen erreicht?Nun, ohne Zweifel entstehen sie aus dem, was wir nennen: Folgen von Zeichnungen oder Fotografien dass sie durch eine nacheinander geordnete Anordnung eine glaubwürdige Bewegung vor unseren Augen erzeugen, die sich anbietet und in das Spiel der visuellen Illusion eingeht.

Früher wurden die ersten Animationen auf Papierbögen entworfen, in jedem von ihnen wurde die animierte Figur mit Schritten gezeichnet und am Ende des Bogens schnell nacheinander vorbeigefahren, um den Bewegungseffekt im Zeichnung.

Animationsarten

Es gibt verschiedene Arten von Animationen:

Cartoon oder traditionelle Animation

Dieser Stil besteht darin, dem Protagonisten Frame für Frame Bewegung zu geben. Am Anfang, als es nicht genügend audiovisuelle Mittel gab, wurden sie durch das Zeichnen und Malen jedes Bildes (einschließlich Hintergrund, Bühne oder Hintergrund der Animation) ausgeführt, um später auf dem, was wir als Filmband kennen, gefilmt zu werden.

Stop-Motion

Stop Motion ist eine Animationstechnik, die nichts mit Cartoons zu tun hat. Darüber hinaus besteht das Hauptziel darin, die Bewegungen von Objekten zu simulieren, die in Wirklichkeit völlig statisch sind, und ist in zwei Phasen unterteilt: Animation von Ton oder Tonbewegung und Animation von starren Objekten.

Pixelierung

Pixelation ist eine Technik, die aus Stop Motion stammt und darin besteht, mit Objekten zu arbeiten, die weder Puppen noch Modelle sind, sondern gewöhnliche Objekte oder Personen. Objekte werden mehrfach fotografiert und verschieben sich mit jedem Frame leicht.

Rotoskopie

Es besteht aus dem direkten Zeichnen einer anderen Zeichnung, beispielsweise dem Nachzeichnen einer Zeichnung auf einer anderen Zeichnung oder einer realen Person. Es gilt als Vorläufer von Mocap, dh von Motion Capture, das verwendet wird, um digitale Charaktere in der Welt des Kinos nachzubilden.

Animation durch Ausschnitte oder ausgeschnittene Animation

Es ist eine Technik, die aus dem Schneiden von Figuren besteht, diese Figuren können auf Papier oder in Fotografien dargestellt werden. Der Körper der Charaktere ist auf der Grundlage von Ausschnitten aufgebaut und Bewegungen und Animationen entstehen durch das Ersetzen dieser Ausschnitte.

Animation 3D

Die 3D-Animation stammt aus einem Editorprogramm, mit dem Simulationen und Animationen durchgeführt werden können. Innerhalb dieser beiden Varianten treffen gute Beleuchtung, Kamerabewegungen und Spezialeffekte aufeinander.

Derzeit gibt es auch andere Techniken wie: die Malerei auf Glas, die Animation von Sand, die Leinwand von Gujas und die Malerei auf Zelluloid. 

Was ist CSS?

Nachdem Sie nun ein wenig mehr über die Welt der Animationen wissen, ist es an der Zeit, Ihnen die Welt der CSS-Akronyme vorzustellen.

Akronym CSS, siehe "Cascading Stylesheets". Es besteht aus einer Sprache, die im Designbereich und bei der Präsentation von Webseiten verwendet wird, noch besser, es handelt sich um eine Reihe von Werkzeugen und Befehlen, die dafür verantwortlich sind, eine Webseite so zu präsentieren, wie wir sie zum ersten Mal sehen es wurde bereits erstellt. Funktioniert mit dem Tool HTML (organisiert aus dem Basisinhalt der Seiten).

Sein Name wird durch die Anzahl der Blätter bestimmt, die er enthält, und eines davon erbt Eigenschaften oder Merkmale von anderen. Das heißt, Sie können mit einer einfachen Blog-Vorlage arbeiten, aber wenn Sie das Erscheinungsbild einer Website anpassen möchten, müssen Sie CSS implementieren, das Ihnen zusammen mit einem guten CMS hilft, die Reichweite Ihrer Inhalte zu erhöhen.

Wozu dient CSS?

Mit CSS können Sie Ihre Seite organisieren, dh Sie können Ihrer Webseite mitteilen, wie Sie alle Informationen finden möchten, damit der Viewer einfach zu handhaben und gleichzeitig nützlich ist. Geben Sie hier alle Befehle einiger Elemente ein, die zum Stil oder Design der Webseite gehören, zum Beispiel die Schriftarten, Farben, Größen usw. 

Damit Sie besser verstehen, worum es bei diesem Tool geht, sind die Spezialisten für digitales Marketing normalerweise die ersten, die dies verstehen, da sie diejenigen sind, die damit umgehen.

Animieren in CSS

Nun, da Sie ein wenig über die Welt der Animationen und CSS wissen. Es ist Zeit, das Tutorial zu starten.

Mit CSS-Animationen können Sie den Übergang zwischen einem CSS-Stil und einem anderen animieren. Diese Animationen bestehen aus zwei Komponenten: a Stil die CSS-Animation und eine Reihe von beschreibt Frames die seinen Anfangs- und Endzustand sowie mögliche Zwischenpunkte darin angeben.

Jede dieser Animationen hat eine Reihe von Vorteilen:

• Die Verwendung ist für einfache Animationen sehr einfach, Sie können dies auch ohne Kenntnisse von Javascript tun.
• Animationen werden auch auf Computern mit geringem Stromverbrauch korrekt angezeigt.
• Durch die Steuerung durch einen Browser ermöglicht es die Optimierung seiner Leistung und Effizienz, wodurch die Häufigkeit reduziert und die Registerkarten so ausgeführt werden, dass sie nicht sichtbar sind.

Animationseinstellungen

Um eine Animation zu starten, müssen wir sie zunächst konfigurieren. Dazu gehen wir auf das Grundstück Animation und zu seinen Untereigenschaften. Mit diesem Tool können wir sowohl den Rhythmus als auch die Dauer der Animation konfigurieren und nicht einmal ihre Reihenfolge.

Die Untereigenschaften sind:

Animation - Verzögerung

Verzögerungszeit zwischen dem Moment des Ladens des Elements und dem Beginn der Animationssequenz.

Animation - Richtung

Gibt an, ob die Animation am Ende der Sequenz zum Startbild zurückkehren soll oder ob sie am Ende wieder von vorne beginnen soll.

Animationsdauer

Gibt die Zeit an, die die Animation benötigt, um ihren Zyklus abzuschließen (die Dauer)

Animation - Iteration - Zählen

Die Anzahl der Wiederholungen. Wir können angeben unendlich um die Animation auf unbestimmte Zeit zu wiederholen.

Animation - Name

Es wird verwendet, um den Namen anzugeben, der jeden der Frames der Animation beschreibt.

Animation - Spiel - Zustand

Ermöglicht das Anhalten und Fortsetzen der Animationssequenz.

Animation - Timing-Funktion

Es gibt den Rhythmus der Animation an, dh wie die Animationsframes dargestellt werden, dazu werden Beschleunigungskurven erstellt.

Animation - Füllen - Modus

Gibt an, welche Werte die Eigenschaften nach dem Ende der Animation haben.

Richten Sie die Sequenz mit Frames ein

Nachdem wir die Uhrzeit, die Nomenklatur usw. Es ist an der Zeit, unserer Animation ein Aussehen oder ein Gefühl zu geben.

Dazu erstellen wir zwei neue Frames und verwenden die Regel @Keyframes. Dabei beschreibt jeder Frame, wie jedes Element während der Animationssequenz gefunden wird.

Um dies anzuzeigen Zeit und Rhythmus, der rahmen verwendet Prozentsatz und von und bisDadurch können wir angeben, wann der Beginn mit 0% und das Ende mit 100% erfolgt.

Rahmen- und Textanimation

Um weitere Rahmen hinzuzufügen und sie mit Text zu animieren, müssen Sie eine größere Schriftgröße für die Kopfzeile anwenden, sodass die Kopfzeile für eine bestimmte Zeit größer wird, während sie sich bewegt, und anschließend auf ihre ursprüngliche Größe verkleinert. Dazu erstellen wir folgenden Code:

75% Schrift - Größe: 300%; Marge - links: 25%; Breite: 150%;

Mit diesem Code schlagen wir dem Browser vor, dass der Header in 75% der Sequenz einen linken Rand von 25% und eine Größe von 200% bei einer Breite von 150% hat.

Animation wiederholen

Um eine Animation zu wiederholen, muss die folgende Eigenschaft verwendet werden Animation - Iteration - Zählen und wir müssen angeben, wie oft es wiederholt werden soll. Wir können auch verwenden unendlich damit es immer wiederholt wird.

Fazit

Wie Sie gesehen haben, können Sie in CSS animierte Projekte erstellen und diese eingeben, indem Sie die von uns angegebenen Schritte befolgen. Wenn Sie sich weiter erkundigen und sich informieren, werden Sie feststellen, dass uns viele Möglichkeiten offen stehen.

Hast du dich schon getraut?