CSS Animation

CSS Animationen sind angereihte Codes, die ein bewegtes Bild ergeben. Man kann mit diesen Animationen alles erstellen. Von drehenden Kugeln mit dem Buchstaben "O", bis hin zu selbstschreibenden Text.

Um eine perfekte Animation zu haben, brauch man viel Erfahrung, Zeit und Nerven. Viele Animationen kann man sich selbst generieren lassen. Das Problem, sich ein Code generieren zu lassen, ist Folgendes: Das Ergebnis ist leider nicht, wie man es sich vorgestellt hat.

Um ein besseres Bild von CSS Animationen zu haben, ist dieser Link dazu da, zu Veranschaulichen, was für Animationen man programmieren kann.

In diesem Link kann man sich eine CSS-Animation anschauen, die aus ähnlichen Elementen, die genannt wurden, bestehen:



https://codepen.io/denic/pen/GRoOxbM

Diese Animation simuliert einen schreibenden Text. Im Code ist zu sehen, dass die Animationsdauer auf 2 Sekunden gestellt wurde. Diese kann man individuell einstellen, wie es einem gefällt. (Dies funktioniert unter der CSS-Datei, bei Animation: typing 2s steps(22), blink. 5s step-end infinite alternate. Dort muss stellt man typing (gewünschte Zeit) s ein). Des weiterem kann man sehen, dass das Blinken des Striches auf 50 % eingestellt wurde. Dies kann man auch auf eine Geschwindigkeit umstellen, was aber nicht empfehlenswert ist, da dies sehr unhandlich aussieht. Der Strich wurde als border-right eingestellt, was der Grund ist, warum er überhaupt erscheint. 

By accepting you will be accessing a service provided by a third-party external to https://nrml.de/