25 coole CSS-Animationsbeispiele zum Neuerstellen

Beispiel für eine CSS-Animationsmaus
(Bildnachweis: Donovan Hutchinson)
Seite 1 von 2: CSS-Animations-Tutorials

Bei guter Verwendung ist die CSS-Animation ein unglaublich nützliches und leistungsstarkes Werkzeug. Es kann Interesse oder kreative Aufregung wecken, den Blick des Benutzers lenken, etwas schnell und prägnant erklären und die Benutzerfreundlichkeit verbessern. Aus diesem Grund wurden in den letzten Jahren immer mehr Animationen auf Websites und in Apps angezeigt.

In diesem Artikel fassen wir einige der coolsten CSS-Animationsbeispiele zusammen, die wir je gesehen haben, und zeigen Ihnen, wie Sie sie neu erstellen. Lesen Sie weiter, um eine Reihe von ausführlichen Tutorials und inspirierenden Effekten (und Links zu ihrem Code) zu entdecken.

Was ist CSS-Animation?

CSS-Animation ist eine Methode zum Animieren bestimmter HTML-Elemente, ohne dass prozessor- und speicherhungriges JavaScript oder Flash verwendet werden muss. Die Anzahl oder Häufigkeit der CSS-Eigenschaften, die geändert werden können, ist unbegrenzt. CSS-Animationen werden durch Angabe von Keyframes für die Animation initiiert: Diese Keyframes enthalten die Stile, die das Element haben wird.



Während es in Bezug auf Animationen begrenzt erscheint, ist CSS tatsächlich ein wirklich leistungsfähiges Werkzeug und in der Lage, wunderschön flüssige 60-fps-Animationen zu erstellen. 'Es muss nicht schwierig sein, durchdachte, flüssige Animationen zu liefern, die Ihrer Website eine bedeutende Tiefe verleihen', sagt der Front-End-Webentwickler Adam Kuhn. 'Moderne CSS-Eigenschaften bieten Ihnen jetzt fast alle Tools, die Sie benötigen, um unvergessliche Erlebnisse für Ihre Benutzer zu schaffen.'

Die besten Animationen haben immer noch ihre Wurzeln in Disneys Klassiker 12 Prinzipien der Animation - In diesen CSS-Animationsbeispielen werden mehrere Erwähnungen dazu angezeigt. Es lohnt sich daher, diesen Artikel zu lesen, bevor Sie beginnen. Vielleicht möchten Sie auch unsere Zusammenfassung von großartigen erkunden animierte Musikvideos für weitere Beispiele und Inspiration.

Die goldene Regel lautet, dass Ihre CSS-Animationen nicht überblasen werden sollten - selbst eine kleine Bewegung kann große Auswirkungen haben und zu viel kann Benutzer ablenken und irritieren. Hier sind unsere Lieblingsbeispiele und wie man sie neu erstellt.

01. Lustiger Mauseffekt

Dies ist ein lustiger Effekt, der Ihrer Maus folgt. Dies kann hilfreich sein, wenn Sie auf ein Element auf Ihrer Seite aufmerksam machen möchten.

Für diesen Effekt benötigen wir sehr wenig HTML:

Zuerst positionieren wir die Demo und legen die Perspektive für unsere 3D-Transformation fest:

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

Dann stylen Sie das Div, das wir animieren möchten:

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

Hier setzen wir einen Hintergrund, dann setzen wir Überlauf zu versteckt damit wir a hinzufügen können Glanz Wirkung später. Wir setzen auch CSS-Variablen , sheenX und Glanz .

Diese Glanzvariablen helfen bei der Positionierung des Glanz-Effekts. Wir verwenden sie in unseren Karten nach dem Pseudoelement:

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }

Hier stellen wir sicher, dass das Pseudoelement größer als der Container ist. Dies gibt uns etwas, auf dem wir herumrutschen können Karte mit verwandeln .

Das verwandeln Die Eigenschaft verwendet die zuvor festgelegten CSS-Variablen. Wir werden diese mit JavaScript einstellen. Lassen Sie uns das JavaScript so einrichten, dass es zuerst auf Mausereignisse wartet:

document.onmousemove = handleMouseMove;

Wir brauchen jetzt eine handleMouseMove Funktion zu handhaben onmousemove ::

function handleMouseMove(event) { const height = window.innerHeight; const width = window.innerWidth; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

Unsere Funktion nimmt die Fensterhöhe und -breite und erzeugt einen Winkel auf der X- und Y-Achse. Wir setzen diese dann auf die verwandeln Stil unserer Karte . Dies gibt der Karte einen Winkel basierend auf der Maus!

Als nächstes rufen wir eine Funktion auf, um die Position des Pseudoelements festzulegen:

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; const yOffset = 1 - (yRatio - 0.5) * 800; target.style.setProperty('--sheenX', `${xOffset}px`) target.style.setProperty('--sheenY', `${yOffset}px`) }

Unser Pseudoelement sieht am besten aus, wenn es sich in die entgegengesetzte Richtung zur Maus bewegt. Um dies zu erreichen, erstellen wir eine Zahl zwischen -0,5 und 0,5, die sich durch Berechnung des Verhältnisses mit -1 in die entgegengesetzte Richtung ändert.

Wir multiplizieren diese Zahl mit 800, da sie auf maximal maximal skaliert werden soll 400px , so weit setzen wir die Glanz Pseudoelement außerhalb des Karte .

Zuletzt setzen wir diese Offset-Werte auf unsere CSS-Variableneigenschaften, und der Renderer des Browsers erledigt den Rest.

Wir haben jetzt eine Karte, die sich unserer Maus zuwendet, während sich der Glanz-Effekt oben in die entgegengesetzte Richtung bewegt. Dies schafft einen schönen, auffälligen Effekt.

02. Die große Enthüllung

  • Autor: Adam Kuhn

Animierte Inhalte zeigen, dass Effekte derzeit sehr beliebt zu sein scheinen. Bei richtiger Verwendung können sie den Benutzerfokus erfassen und Ihr Publikum einbeziehen. Sie haben dies bereits gesehen: Ein Farbblock wächst horizontal oder vertikal von der einen oder anderen Seite und zieht sich dann auf die gegenüberliegende Seite zurück. Diesmal wird Text oder ein Bild darunter angezeigt. Es ist ein Konzept, das schwierig erscheinen mag, sich aber wirklich auf ein paar Dinge stützt.

Zuerst richten wir unsere Elementpositionierung ein ( Laden Sie hier den vollständigen Code herunter ) - Definieren Sie es als relativ (in diesem Fall schlägt nur statisch fehl). In Textfällen ist es am besten, automatische Höhe und Breite zuzulassen, obwohl ein bisschen Polsterung nicht schadet. Wir definieren auch einen Transformationsursprung, im Fall des übergeordneten Elements möchten wir die Startposition verwenden. Da das Element zunächst ausgeblendet werden soll, verwenden wir eine Skalentransformation entlang der entsprechenden Achse, um es zu verkleinern.

Als nächstes ein Pseudoelement, um unser übergeordnetes Element zu maskieren und den Transformationsursprung auf die entgegengesetzte Option zu setzen. Zum Schluss reihen Sie die Animationen aneinander und verwenden entweder die Timing-Funktionen oder Verzögerungen, um sie zu versetzen.

Beachten Sie, dass wir die Animationen des übergeordneten Elements und des Pseudoelements mit einer Verzögerung versetzt haben, die dem Feld, in dem unser Text ausgeblendet ist, mitteilt, dass er erst angezeigt wird, nachdem das Element selbst vollständig skaliert wurde. Schauen Sie sich den Codepen unten an.

03. Taumeln Sie weiter

  • Autor: Adam Kuhn

Sobald Sie damit begonnen haben, eine anständige Bibliothek mit verschiedenen Lockerungsschnipsel zu sammeln, ist es an der Zeit, nach anderen Möglichkeiten zu suchen, um die Tiefe Ihrer Animationen zu verbessern. Eine der besten Möglichkeiten besteht darin, Ihre animierten Elemente zu versetzen.

Es ist nur allzu häufig, dass ein JavaScript-Trigger so eingestellt ist, dass er eine Reihe von Animationen basierend auf der Bildlaufposition initiiert, um dann alle Elemente zu finden, die sich effektiv im Tandem bewegen. Glücklicherweise bietet CSS selbst eine einfache Eigenschaft, mit der Sie Ihre animierte Erfahrung verbessern (oder unterbrechen) können: Animationsverzögerung .

Nehmen wir zum Beispiel an, wir haben ein Raster von Bildern, die wir beim Scrollen in einen Rahmen animieren möchten. Es gibt eine Reihe von Möglichkeiten, wie wir dies auslösen können, indem wir den Elementen höchstwahrscheinlich Klassen hinzufügen, wenn sie in das Ansichtsfenster gelangen. Dies kann jedoch eine große Belastung für den Browser darstellen und kann vermieden werden, indem einfach eine einzelne Klasse zu einem Containerelement hinzugefügt und Animationsverzögerungen für untergeordnete Elemente definiert werden.

Dies ist ein besonders guter Anwendungsfall für Präprozessoren wie SCSS oder LESS, mit denen wir a verwenden können @zum Schleife, um durch jedes Element zu iterieren.

#parent{ .child{ animation: animationName 1.5s ease-in-out 1 forwards; @for $i from 1 through 20{ &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s; } } } }

Hier sehen Sie, dass wir mit SCSS jede Schleife durchlaufen können : n-ter Typ Wählen Sie dann eine Animationsverzögerung aus, die auf dem numerischen Wert jedes untergeordneten Elements basiert. In diesem Fall werden Sie feststellen, dass wir unser Timing aufteilen, um jedes Inkrement auf einen Bruchteil einer Sekunde zu reduzieren. Während das Versetzen Ihrer animierten Elemente Ihrer Animation Emotionen verleihen kann, kann eine zu große Verzögerung dazu führen, dass sie sich unzusammenhängend anfühlt. Schauen Sie sich diesen CodePen unten an.

04. Squigglevision

  • Autor: Adam Kuhn

SVG-Filter bieten eine großartige Möglichkeit, ein natürliches, von Hand gezeichnetes Gefühl zu erzielen und sich einigen der Einschränkungen beim Rendern von CSS mit flachem Gefühl zu entziehen. Das Animieren kann den Effekt weiter verstärken.

Ein typisches Beispiel: Squigglevision. Ja, dies ist kein Fachbegriff, der den meisten Animatoren bekannt ist, aber Sie haben sicherlich gesehen, dass er in Cartoons verwendet wird. Die Idee ist, dass die Kanten dieser animierten Elemente nicht nur etwas gezackt und grob behauen sind, sondern dass sich diese rauen Kanten schnell Frame für Frame ändern, sodass sie sich anfühlen, als wären sie von den Seiten eines Skizzenbuchs gerissen und in das Bild gebracht worden Leben.

Um diesen Effekt zu erzielen, können wir auf unserer Seite ein SVG mit mehreren Filtern und geringfügigen Abweichungen in den Turbulenzniveaus für jeden Filter einfügen. Als Nächstes richten wir unsere Animationszeitleiste ein und rufen jeden Filter in einem eigenen Keyframe auf. Es ist wichtig, mit der Zeitdauer zu spielen, da wir davon ausgehen, dass sich die Animation 'nervös' anfühlt, aber nicht so langsam, dass sie sich unzusammenhängend oder so schnell wie verrückt anfühlt.

Zu diesem Zweck ist zu beachten, dass CSS nicht in der Lage ist, reibungslos zwischen SVG-Filtern zu wechseln, da kein Zugriff auf Eigenschaften wie Turbulenzen und Skalierung möglich ist. Daher sollte davon ausgegangen werden, dass diese Arten von Animationen immer abgehackt sind.

05. Tumbling Schriftzug

CSS-Animation: Tumbling-Schriftzug

Googles Spiel des Jahres bietet eine spielerische CSS-Animation auf der Startseite, bei der die Titelwörter zusammenstoßen und ineinander stoßen. Hier ist, wie es gemacht wurde.

Der erste Schritt besteht darin, das Webseitendokument mit HTML zu definieren. Es besteht aus dem HTML-Dokumentcontainer, in dem ein Kopf- und ein Körperteil gespeichert sind. Während der Kopfabschnitt zum Laden der externen CSS- und JavaScript-Ressourcen verwendet wird, wird der Hauptteil zum Speichern des Seiteninhalts verwendet.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Der Seiteninhalt besteht aus drei h1-Titel-Tags, die die verschiedenen Variationen des Animationseffekts anzeigen. Während jeder Text in diese Tags eingefügt werden kann, wird ihre Animation durch die Namen im Klassenattribut definiert. Die Präsentations- und Animationseinstellungen für diese Klassennamen werden später im CSS definiert.

Erstellen Sie als Nächstes eine neue Datei mit dem Namen ' code.js '. Wir wollen alle Seitenelemente mit dem finden Animiert Klasse und erstellen Sie eine Array Liste, die jedes Wort des inneren Textes darstellt. In diesem Schritt wird auch die anfängliche Animationsverzögerung definiert. Der Seiteninhalt ist erst verfügbar, wenn die Seite vollständig geladen wurde. Daher wird dieser Code in das Fenster eingefügt Belastung Ereignis-Listener.

Der Wortinhalt der Animationselemente muss in a enthalten sein Spanne Element. Zu diesem Zweck wird der vorhandene HTML-Inhalt auf leer zurückgesetzt. Anschließend wird eine Schleife verwendet, um das Wort in der Liste der identifizierten Wörter zu einem Span-Element zu machen. Zusätzlich ein animationDelay Stil wird angewendet - berechnet in Bezug auf die anfängliche Verzögerung (unten angegeben) und die Indexposition des Wortes.



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

Erstellen Sie eine neue Datei mit dem Namen styles.css . Jetzt legen wir die Präsentationsregeln fest, die Teil jedes Wortelements in der Animation sind und von ihrem Span-Tag gesteuert werden. Die Anzeige als Block in Kombination mit der zentrierten Textausrichtung führt dazu, dass jedes Wort in einer separaten Zeile angezeigt wird, die horizontal zur Mitte des Containers ausgerichtet ist. Die relative Positionierung wird verwendet, um in Bezug auf seine zu animieren Textfluss Position.

.animate span{ display: block; position: relative; text-align: center; }

Auf Animationselemente mit der Rückwärts- und Vorwärtsklasse wird eine bestimmte Animation angewendet. Dieser Schritt definiert die Animation, die auf Span-Elemente angewendet werden soll, deren übergeordneter Container beide enthält Animiert und rückwärts oder vorwärts Klasse.

Beachten Sie, dass zwischen dem kein Leerzeichen ist Animiert und rückwärts Klassenreferenz, dh das übergeordnete Element muss beide haben.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

Die gemischte Animation wird mit denselben Einstellungen definiert, die für die Vorwärts- und Rückwärtsanimationen verwendet werden. Anstatt die Animationen auf jedes Kind des Elternteils anzuwenden, wird die n-tes Kind Mit dem Selektor werden abwechselnde Animationseinstellungen angewendet. Die Rückwärtsanimation wird auf alle angewendet sogar -Nummer Kind, während die Vorwärtsanimation auf alle angewendet wird seltsam -Nummer Kind.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

Die Animationen, die wir gerade erstellt haben, werden mit einer Initiale erstellt. von Startposition ohne vertikale Position oder Drehung. Das ' zu 'position ist der Endzustand der Animation, der die Elemente mit einer angepassten vertikalen Position und einem angepassten Rotationszustand festlegt. Für beide Animationen werden leicht unterschiedliche Endeinstellungen verwendet, um zu vermeiden, dass der Text aufgrund von Überlappungen in gemischten Animationen unlesbar wird.

@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. Daumenkino

  • Autor: Adam Kuhn

Bei der Animation mit CSS ist manchmal ein kinderleichter Ansatz erforderlich. Und es gibt nur wenige einfachere Animationsmethoden als das Daumenkino. Verwenden von Schritte () Als unsere Timing-Funktion können wir diesen Effekt replizieren. Während dies abgehackt klingt und unserer Mission, die Fließfähigkeit aufrechtzuerhalten, direkt widerspricht, kann es sich mit dem richtigen Tempo genauso nahtlos organisch anfühlen.

Wie funktioniert es? Wir definieren unsere Animationserleichterungsfunktion mit nur wenigen zusätzlichen Parametern. Sie teilen unserer Animation mit, wie viele Schritte erforderlich sind und an welchem ​​Punkt im ersten Schritt wir beginnen möchten (Start Ende) - zum Beispiel ein bisschen so aussehen Schritte (10, Start) .

In unseren Keyframes können wir jetzt einen Endpunkt für unsere Animation festlegen. In diesem Beispiel nehmen wir an, dass unsere Animation 10 Sekunden lang ist und wir 10 Schritte verwenden. In diesem Fall ist jeder Schritt eine Sekunde lang und bewegt sich sofort zum folgenden Ein-Sekunden-Frame ohne Übergang dazwischen.

Auch dies scheint angesichts der Fluidität zu fliegen, aber hier können gestufte Animationen wirklich glänzen. Wir können schrittweise durch ein Sprite-Blatt iterieren und Frame für Frame wie ein Daumenkino animieren. Indem wir Frames gleicher Größe definieren, diese jedoch zu einem einzigen horizontalen (oder vertikalen) Bild kompilieren, können wir dieses Bild als Elementhintergrund festlegen und eine Pixel- oder prozentuale Hintergrundposition als Endpunkt für unsere Animation definieren, wobei jeweils ein einzelner Schritt zulässig ist Rahmen. Das Sprite-Blatt wird dann verschoben und das Element Frame für Frame mit einem neuen Hintergrundbild basierend auf seiner Position gefüllt.

Schauen wir uns ein Beispiel an. In diesem Fall werden einige Sätze animierter Beine an einige Textzeichen angehängt. Zunächst definieren wir den Namen, die Dauer, die Schrittzahl, die Startposition und die Iterationszahl der Animation:

animation:runner 0.75s steps(32, end) infinite;

Beachten Sie erneut, dass die Dauer für insgesamt 32 Frames mit weniger als einer vollen Sekunde relativ schnell ist. Als Nächstes definieren wir unsere Keyframes:

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:- 1280px 50%; }}

Beachten Sie, dass die vertikale Positionierung des Bildes durchgehend konsistent ist. Dies zeigt, dass die Sprites horizontal über das Bild gespannt sind, was einer Gesamtbreite von 1280 Pixel entspricht. Da wir für dieses Bild insgesamt 32 Frames definiert haben, können wir daraus schließen, dass jeder Frame 40 Pixel breit sein sollte. Schauen Sie sich diesen Codepen unten an.

Es ist wichtig zu beachten, dass ein großes Sprite-Blatt möglicherweise die Leistung erheblich beeinträchtigt. Achten Sie daher darauf, die Größe der Bilder zu ändern und sie zu komprimieren. Mit einem gut gestalteten Sprite-Blatt und einer angemessenen Animationsdauer haben Sie jetzt eine reibungslose Animation, die komplexe Bewegungen übermitteln kann.

07. Blasen

Die CSS-Blasenanimation von 7UP ist ein schönes Beispiel dafür, wie ein Markenthema in das Website-Design übernommen wird. Die Animation besteht aus einigen Elementen: dem SVG-Zeichnen der Blasen und zwei Animationen, die auf jede Blase angewendet werden.

Die erste Animation ändert die Deckkraft der Blase und verschiebt sie vertikal im Ansichtsfeld. Der zweite erzeugt den Wackeleffekt für zusätzlichen Realismus. Die Offsets werden behandelt, indem auf jede Blase abgezielt wird und eine andere Animationsdauer und -verzögerung angewendet wird.

Um unsere Blasen zu erzeugen, werden wir verwenden SVG . In unserer SVG erstellen wir zwei Schichten von Blasen: eine für die größeren Blasen und eine für die kleineren Blasen. Innerhalb der SVG positionieren wir alle unsere Blasen am unteren Rand des Ansichtsfelds.

... ...

Um zwei separate Animationen auf unsere SVGs anzuwenden, die beide die Transformationseigenschaft verwenden, müssen wir die Animationen auf separate Elemente anwenden. Das Element in SVG kann ähnlich wie ein Div in HTML verwendet werden; Wir müssen jede unserer Blasen (die sich bereits in einer Gruppe befinden) in ein Gruppen-Tag einwickeln.

CSS verfügt über eine leistungsstarke Animations-Engine und einen wirklich einfachen Code, um komplexe Animationen zu erstellen. Wir beginnen damit, die Blasen auf dem Bildschirm nach oben zu bewegen und ihre Deckkraft zu ändern, um sie zu Beginn und am Ende der Animation ein- und auszublenden.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); } }

Um einen Wackeleffekt zu erzielen, müssen wir die Blase einfach um genau den richtigen Betrag nach links und rechts bewegen (oder verschieben) - zu viel führt dazu, dass die Animation zu ruckelig und unzusammenhängend aussieht, während zu wenig meistens unbemerkt bleibt. Experimentieren ist der Schlüssel bei der Arbeit mit Animationen.

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

Um die Animation auf unsere Blasen anzuwenden, verwenden wir die zuvor verwendeten Gruppen und die Hilfe von n-ter Typ um jede Blasengruppe einzeln zu identifizieren. Wir beginnen mit der Anwendung eines Opazitätswerts auf die Blasen und die wird sich verändern Eigenschaft, um Hardwarebeschleunigung zu nutzen.

.bubbles-large > g { opacity: 0; will-change: transform, opacity;} .bubbles-large g:nth-of-type(1) {...} ... .bubbles-small g:nth-of-type(10) {...}

Wir möchten alle Animationszeiten und Verzögerungen innerhalb weniger Sekunden voneinander halten und so einstellen, dass sie sich unendlich wiederholen. Zuletzt wenden wir die Easy-In-Out Timing-Funktion für unsere Wobble-Animation, damit sie etwas natürlicher aussieht.

.bubbles-large g:nth-of-type(1) { animation: up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. Maus scrollen

Eine subtile Mausanimation mit Bildlauf kann dem Benutzer Anweisungen geben, wenn er zum ersten Mal auf einer Website landet. Obwohl dies mithilfe von HTML-Elementen und -Eigenschaften erreicht werden kann, verwenden wir SVG, da dies besser zum Zeichnen geeignet ist.

In unserem SVG benötigen wir ein Rechteck mit abgerundeten Ecken und einen Kreis für das zu animierende Element. Mit SVG können wir das Symbol auf jede gewünschte Größe skalieren.

Nachdem wir unser SVG erstellt haben, müssen wir einige einfache Stile anwenden, um die Größe und Position des Symbols in unserem Container zu steuern. Wir haben einen Link um das Maus-SVG gewickelt und ihn am unteren Bildschirmrand positioniert.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } .mouse { max-width: 2.5rem; width: 100%; height: auto; }

Als Nächstes erstellen wir unsere Animation. Bei 0 und 20 Prozent des Weges durch unsere Animation möchten wir den Zustand unseres Elements so einstellen, wie es beginnt. Wenn Sie den Wert auf 20% einstellen, bleibt er einen Teil der Zeit still, wenn er unendlich oft wiederholt wird.

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); } }

Wir müssen den Opazitätsstartpunkt hinzufügen und dann sowohl die Y-Position als auch die vertikale Skala an der 100% -Marke, dem Ende unserer Animation, transformieren. Das Letzte, was wir tun müssen, ist die Deckkraft zu verringern, um unseren Kreis auszublenden.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; } }

Zuletzt wenden wir die Animation zusammen mit der Eigenschaft 'transform-origin' und dem auf den Kreis an wird sich verändern Eigenschaft, um Hardwarebeschleunigung zu ermöglichen. Die Animationseigenschaften sind ziemlich selbsterklärend. Das kubischer Bezier Die Timing-Funktion wird verwendet, um den Kreis zuerst zurückzuziehen, bevor er auf den unteren Rand unserer Mausform fällt. Dies verleiht der Animation ein spielerisches Gefühl.

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. Animiertes Schreiben

CSS-Animationen: Schreiben

Klicken Sie hier, um die Animation in Aktion zu sehen

Die Garden Eight-Website verwendet eine gängige Animationstechnik, bei der Text ausgeschrieben zu sein scheint. Um diesen Effekt zu erzielen, wenden wir uns an SVG. Zunächst erstellen wir die SVG. Hier gibt es zwei Ansätze: Konvertieren Sie den Text in Pfade, um sie zu animieren, oder verwenden Sie SVG-Text. Beide Ansätze haben ihre Vor- und Nachteile.

Beginnen Sie mit der Erstellung unserer Keyframe-Animation. Die einzige Funktion, die wir ausführen müssen, ist das Ändern der Strich-Dashoffset . Nachdem wir unsere Animation erstellt haben, müssen wir die Werte anwenden, aus denen wir animieren möchten. Wir setzen die Schlaganfall-Dasharray , wodurch Lücken im Strich entstehen. Wir möchten unseren Strich so einstellen, dass er groß genug ist, um das gesamte Element abzudecken, und schließlich den Strich um die Länge des Strichs versetzen.

Die Magie entsteht, wenn wir unsere Animation anwenden. Durch Animieren des Versatzes wird der Strich sichtbar und ein Zeichnungseffekt erzeugt. Wir möchten, dass die Elemente einzeln gezeichnet werden, wobei sich das Ende des Zeichnens eines Elements und der Beginn des Zeichnens des nächsten Elements überschneiden. Um dies zu erreichen, wenden wir uns an Sass / SCSS und n-ter Typ um jeden Buchstaben um die halbe Länge der Animation zu verzögern, multipliziert mit der Position dieses bestimmten Buchstabens.

10. Fliegende Vögel

Wir beginnen mit vollständig geraden Vektorlinien, zeichnen jeden Frame unserer Animation und zeigen den Vogel in einem anderen Flugzustand. Wir manipulieren dann die Vektorpunkte und runden die Linien und Kanten ab. Schließlich legen wir jeden Rahmen in eine gleich große Schachtel und platzieren sie nebeneinander. Exportieren Sie die Datei als SVG.

Das HTML-Setup ist wirklich einfach. Wir müssen nur jeden Vogel in einen Container wickeln, um mehrere Animationen anzuwenden - eine, um den Vogel zum Fliegen zu bringen, und die andere, um ihn über den Bildschirm zu bewegen.

Wir wenden unser Vogel-SVG als Hintergrund für unser Vogel-Div an und wählen die Größe, die jeder Rahmen haben soll. Wir verwenden die Breite, um die neue Hintergrundposition grob zu berechnen. Das SVG hat 10 Zellen, also multiplizieren wir unsere Breite mit 10 und ändern dann die Zahl leicht, bis sie korrekt aussieht.

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

Die CSS-Animation enthält einige Tricks, die Sie möglicherweise nicht kennen. Wir können die verwenden Animations-Timing-Funktion um das Bild schrittweise anzuzeigen - ähnlich wie beim Blättern durch Seiten in einem Notizbuch, um auf die Animation hinzuweisen.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

Jetzt haben wir unseren Flugzyklus erstellt. Unser Vogel schlägt derzeit mit den Flügeln, geht aber nirgendwo hin. Um sie über den Bildschirm zu bewegen, erstellen wir eine weitere Keyframe-Animation. Diese Animation bewegt den Vogel horizontal über den Bildschirm und ändert gleichzeitig die vertikale Position und die Skalierung, damit sich der Vogel realistischer schlängeln kann.

Sobald wir unsere Animationen erstellt haben, müssen wir sie nur noch anwenden. Wir können mehrere Kopien unseres Vogels erstellen und unterschiedliche Animationszeiten und Verzögerungen anwenden.

.bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; }

11. Überquere meinen Hamburger

Diese Animation wird im gesamten Web verwendet und verwandelt drei Linien in ein Kreuz- oder Schließsymbol. Bis vor kurzem wurden die meisten Implementierungen mithilfe von HTML-Elementen durchgeführt. SVG eignet sich jedoch viel besser für diese Art von Animation. Sie müssen den Code Ihrer Schaltflächen nicht mehr mit mehreren Bereichen aufblähen.

Aufgrund der animierbaren Natur und der SVG-Datei sowie des navigierbaren DOM ändert sich der Code zum Ausführen der Animation oder des Übergangs kaum - die Technik ist dieselbe.

Wir beginnen mit der Erstellung von vier Elementen, sei es innerhalb eines Divs oder Pfade innerhalb eines SVG. Wenn wir Spans verwenden, müssen wir CSS verwenden, um sie innerhalb des Div zu positionieren. Wenn wir SVG verwenden, ist dies bereits erledigt. Wir möchten die Linien 2 und 3 in der Mitte übereinander positionieren, während wir die Linien 1 und 4 gleichmäßig über und unter uns verteilen, um sicherzustellen, dass der Transformationsursprung zentriert wird.

Wir werden uns auf den Übergang zweier Eigenschaften verlassen: Deckkraft und Rotation. Zunächst möchten wir die Zeilen 1 und 4 ausblenden, auf die wir mit der Option zielen können : n-tes Kind Wähler.

.menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

Sie müssen nur noch auf die beiden Mittellinien zielen und sie um 45 Grad in entgegengesetzte Richtungen drehen.

.menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

12. Kreise jagen

Das animierte Ladesymbol besteht aus vier Kreisen. Die Kreise haben keine Füllung, sondern abwechselnde Strichfarben.

In unserem CSS können wir einige grundlegende Eigenschaften für alle unsere Kreise festlegen und dann die verwenden : n-ter Typ Auswahl, um eine andere anzuwenden Schlaganfall-Dasharray zu jedem Kreis.

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

Als nächstes müssen wir unsere Keyframe-Animation erstellen. Unsere Animation ist wirklich einfach: Alles, was wir tun müssen, ist, den Kreis um 360 Grad zu drehen. Wenn Sie unsere Transformation an der 50% -Marke der Animation platzieren, wird der Kreis auch wieder in seine ursprüngliche Position gedreht.

@keyframes preloader { 50% { transform: rotate(360deg); } }

Nachdem unsere Animation erstellt wurde, müssen wir sie nur noch auf unsere Kreise anwenden. Wir setzen den Animationsnamen; Dauer; Iterationszahl und Timing-Funktion. Das 'Easy-In-Out' verleiht der Animation ein spielerischeres Gefühl.

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

Im Moment haben wir unseren Lader, aber alle Elemente drehen sich gleichzeitig. Um dies zu beheben, werden wir einige Verzögerungen anwenden. Wir werden unsere Verzögerungen mit einer Sass for-Schleife erstellen.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

Aufgrund der Verzögerungen wird unser Kreis nun der Reihe nach animiert, wodurch die Illusion entsteht, dass sich die Kreise gegenseitig verfolgen. Das einzige Problem dabei ist, dass die Kreise beim ersten Laden der Seite statisch sind und sich nacheinander bewegen. Wir können den gleichen Offset-Effekt erzielen, aber die unerwünschte Pause in unserer Animation stoppen, indem wir einfach die Verzögerungen auf einen negativen Wert setzen.

animation-delay: -#{$i * 0.15}s;

Nächste Seite: Weitere Beispiele für CSS-Animationen

Aktuelle Seite: CSS-Animations-Tutorials

Nächste Seite CSS-Animationseffekte