Reine CSS-Animationen - Machen Sie einen coolen Button, ein gleitendes Modal und eine Produktseite (Kein Javascript)

1. Schnelle Beispiele für schnelles Lernen: Hi, alle. Heute werden wir über Web-Animation lernen. Animation ist wirklich nützlich in so vielen verschiedenen Kontexten. Das menschliche Auge ist verdrahtet, um die Bewegung zu verfolgen. Vor allem, wenn wir dies in ein Web-Projekt integrieren, hilft es uns wirklich, Benutzer zu kontrollieren und die Aufmerksamkeit auf bestimmte Teile unserer Webseite zu lenken. Ganz zu schweigen davon, dass es nur etwas wirklich Spaß und cool ist, wenn Sie Ihre Maus für Ihren Finger um eine Webseite bewegen und sehen, wie es auf Ihre Aktionen reagiert. Heute werden wir einige Web-Animationstools lernen, die Sie in einer Vielzahl von Kontexten anwenden können. Wir werden lernen, wie man Button, Hover-Effekte, Bild ihrer Effekte macht. Wir werden lernen, wie man coole Motil-Funktionalität implantiert. Und dann werden wir sogar lernen, wie man ein cooles Feature von 10 kopiert. Wenn Sie CSS kennen, es aber nie wirklich verwenden, um eine Webseite zu animieren, die perfekt für Sie sein wird . Ich habe dieses Gericht entworfen, um Ihnen viele Konzepte in kurzer Zeit wie möglich vorzustellen , also lasst uns loslegen 2. Was du für diesen Kurs brauchst, solltest du dich: Das Klassenprojekt wird wirklich einfach sein. Alles, was Sie tun müssen, ist eines der Beispiele aus diesem Kurs zu nehmen und irgendwie darauf zu erweitern . Sie könnten sich mit dem CSS verwirren, dem HTML einige neue Elemente hinzufügen und tun, was immer Sie wollen, um es einfach cool zu machen. Jeden Monat werde ich ein Klassenprojekt auswählen, das eingereicht wurde, und ich werde es auf meiner Twitter-Seite platzieren. Lassen Sie uns schnell darüber reden, was Sie für diesen Kurs brauchen werden. Wir werden tatsächlich Code-Stift verwenden, also gibt es keine Notwendigkeit, etwas herunterzuladen oder zu installieren. Ich empfehle Ihnen, einen aktuellen modernen Web-Browser zu haben. Es spielt keine Rolle, welches es ist, solange Sie das neueste Update installiert haben. Denn in diesem Kurs werden wir die Dinge ein wenig beschleunigen, indem wir nicht die Mühe machen, Code für Anbieter-Präfixe zu schreiben. Ich werde Ihnen immer noch zeigen, wo Sie die finden, aber wir werden die Dinge wirklich einfach und auf dem neuesten Stand halten. Moderne Webbrowser benötigen nicht mehr die Anbieter-Präfixe, die wir in diesem Tutorial verwenden würden. Stellen Sie also sicher, dass Sie die aktuellste Version Ihres Browsers haben. Schließlich, während Sie gehen, stellen Sie sicher, dass zu kopieren, könnte pennyroyal für jedes Beispiel und fügen Sie in Ihr Klassenprojekt , weil wir später im Kurs auf einige von ihnen zurückkommen werden. Wenn Ihr Browser auf dem neuesten Stand ist, alle bereit, etwas Seiten zu animieren, lassen Sie uns beginnen. 3. Animation Button, Hintergrund und Text: Ordnung, lassen Sie uns eintauchen und beginnen, diese Webseite zu animieren. Wie Sie sehen können, ist es eine super einfache Webseite. Nur wenig genannt die Aktion mit diesem Knopf. Im Moment tut es gar nichts. Also lasst uns es ein wenig verkleiden. Ähm, wir gehen voran und springen in den Code Leute. Und das erste, was Sie tun werden, ist eine Kopie davon zu erstellen, damit Sie Ihre Änderungen speichern können. Kommen Sie zurück, wenn Sie es später referenzieren möchten. Also, wo kommt hier oben Klick Gabel? Wir müssen uns nicht wirklich registrieren, also sagen wir einfach, speichert anonym. Wir müssen uns nicht wirklich registrieren, Wenn Sie ein Konto haben, können Sie sich einloggen und oder wenn Sie Stempel möchten, können Sie auf jeden Fall. Aber das musst du nicht. Tut mir leid, das zu tun. Und jetzt, nur damit wir später zu dieser Seite zurückkehren können, gehen wir hier hoch und kopieren die URL. Wir werden ein Projekt starten. Setze deinen Titel ein. Wir sagen nur Beispiel eins und Frieden. , jetzt, Also, jetzt,da wir das getan haben, reden wir darüber, wie wir das animieren wollen. Ähm, ich finde es ziemlich cool, wenn dieser Knopf in eine andere Farbe wechselt, wenn wir sie darüber haben . Alles klar, da können wir sehen, dass der schwerere Effekt jetzt angewendet wird, wenn wir ein Kaninchen haben. Wie sollen wir das eigentlich animieren, damit es nicht einfach direkt zu dieser anderen Farbe springt ? Wir wollten tatsächlich zu diesem Blau verblassen. Also, wenn Sie über den Job eines Skript-Panels ziehen, werden Sie sehen, dass ich diesen Link für Sie angehalten habe. Lass uns das jetzt einfach über Links öffnen. Ich werde uns auf die W 3 Schulen Dot com Website bringen. Es ist eine super hilfreiche Referenzspitze. Jedes Ihrer CSS HTML JavaScript usw cetera braucht hier. Wir schauen uns nur die Übergangs-Eigenschaft an. Und bevor du zu viel darüber redest,möchte ich nur eine kurze Notiz machen. Und bevor du zu viel darüber redest, In diesem Kurs werden wir keine Hersteller-Präfixe wie Web get mas verwenden. Ähm, aber notieren Sie sich das. Wenn Sie ältere Versionen dieser Browser unterstützen möchten, dann werden Sie sie definitiv bei der Implementierung auf Ihren eigenen Websites einschließen wollen . Also bedenken Sie das im Hinterkopf. Schauen wir uns das jetzt in der Steuer an. Also haben wir diesen Übergang und wir sehen, dass wir einen Immobilienverband übergeben können, eine Verschärfungsfunktion, eine Verzögerung und dann natürlich anfänglich erben. Also, in Bezug auf die Animation der Hintergrundfarbe, denke ich, jetzt lassen Sie uns einfach mit der Eigenschaft in der Dauer bleiben und wir können später über einige der anderen Anwendungen sprechen . Okay, also gehen wir zurück und fügen wir die Übergangseigenschaft zu unserer Schaltfläche hinzu. Und wir müssen dies tatsächlich der Button-Klasse hinzufügen und nicht der Schaltfläche. Haben Sie ihre Klasse, weil Sie diese Übergangseigenschaft nicht gleichzeitig übergeben können, ändern Sie den tatsächlichen Effekt, den Sie erzielen möchten. Gehen wir also voran und legen Sie den Übergang auf die Eigenschaft der Hintergrundfarbe fest. Und machen wir es eine Sekunde. Wir können sie jetzt darüber haben, und wir sehen, dass es jetzt diesen allmählichen Wechsel von Weiß zu Blau macht. Lass es uns ein bisschen schneller machen. Ändern Sie es, um zu zeigen, und jetzt ist es ein viel schnapperer Effekt. Also wir auch diese Timing-Funktion, und im Grunde können Sie viele verschiedene Dinge dazu übergeben. Lassen Sie uns nach unten scrollen und Sie können sehen, wir haben eine Reihe von Dingen wie Leichtigkeit, Leichtigkeit, Leichtigkeit im Moment, lassen Sie uns einfach mit Leichtigkeit bleiben. Und wenn wir es wieder verlangsamen, werden Sie feststellen, dass es nicht nur ein werden Sie feststellen, dass es nicht nur ein reibungsloser Übergang ist. Jetzt beschleunigt es tatsächlich in der Mitte und verlangsamt sich am Anfang und Ende ein wenig. Also lasst uns das wieder ändern. Und jetzt, da Sie das implementiert haben, merke ich, dass eine Sache, die irgendwie seltsam aussieht, ist, dass sich die Schriftfarbe nicht ändert. Das ist also gut. Oder haben Sie ihre Klasse und fügen Sie nur die Gewichtsfarbe, die viel besser aussieht. Aber eine Sache, die Sie bemerken werden, vor allem, wenn wir es verlangsamen, ist, dass der Text tatsächlich gerade sofort schnappt. Es animiert nicht wie der Rest der Schaltfläche, also können wir einen neuen Wert an diese Eigenschaft übergeben. Wir können Farbe sagen. Lass es uns zwei Sekunden behalten. Ease hat dies zurück zu 0.2 geändert, und Sie können sehen, dass beide gemeinsam animieren. Aber das ist eine Menge wiederholter Beschichtung, und das wollen wir natürlich nicht mehr tun als je zuvor. Also schauen wir uns einige andere Wege an. Du kannst das tun. Sie können tatsächlich als Eigenschaft übergeben , , als Eigenschaft übergeben , und das zielt auf jede einzelne mögliche animierte Eigenschaft, die ein Element haben kann, und animiert sie. Und so siehst du, dass es jetzt noch funktioniert. Beide animieren gleichzeitig. Schließlich lassen Sie uns über den letzten Wert sprechen kann ihn zum Übergang übergeben, und das ist die Verzögerung. Also lassen Sie uns eine Verzögerung von 0,2 Sekunden setzen. Und jetzt werden wir sehen, dass, wenn wir den Mauszeiger über diese Schaltfläche bewegen, es tatsächlich eine Sekunde auswählt, bevor die Animation sie startet. Wir werden in den nächsten Beispielen sehen, wie dies wirklich nützlich sein kann, und das war's. Du bist mit dem ersten Beispiel fertig. Sie können mit diesem Code ein wenig rummachen, wenn Sie möchten, oder Sie können direkt in die nächste Lektion eintauchen. 4. Weniger Platz nehmen mit Bild Hover: Alles klar. Für ein zweites Beispiel können Sie sehen, dass wir diese Produktseite haben und jedes Produkt hat ein Bild. Und dann ein bisschen Beschreibung und ein Kauf-Button. Und im Grunde, wenn wir eine Reihe von Produkten auf dieser Seite hätten, würde das viel Platz in Anspruch nehmen. Deshalb wollen wir es so verdichten, dass wir erst die Bilder sehen. Und dann, wenn wir sie über die Bilder haben, bekommen wir tatsächlich die Beschreibungen und das per Button zu sehen. Also schauen wir uns an, wie wir das tun können, obwohl wir irgendwie die Beschreibung innerhalb dieses Bildes enthalten müssen und Sie können die im HTML sehen, die wir tatsächlich eingerichtet haben, so dass das Produktbild und die Parkbeschreibung sind innerhalb dieser Daumenklasse. Also zuerst, gehen wir weiter und wir setzen die Daumenklasse auf eine Höhe von 250 Pixeln, und wir werden die Übergrippe auf „Verborgen“ setzen. Sie können jetzt sehen, dass wir diese Beschreibung nicht sehen können, sie ist unter dem Cut off versteckt, also irgendwie müssen wir es so machen, dass, wenn wir sie über eines dieser Bilder haben , diese , Beschreibung Div erscheint und schwebt über das eigentliche Bild. Daher müssen wir einige Positionierung zum Produktbild in der Produktbeschreibung vornehmen. Und um das tun zu können, wollen wir eigentlich die Position auf dem Daumen einstellen. Denn wenn wir mit absoluter Positionierung auf den's herumlaufen, bekamen Kinderklassen tatsächlich Menschen, sie sie eines Tages relativ zum gesamten Dokument anstatt zu dem, was sie eines Tages betrifft. Wenn ja, lassen Sie uns das vermeiden, indem Sie die Position hier auf relativ setzen. Wir wissen also, dass wir sowohl auf dem Produktbild als auch auf der Produktbeschreibung positionieren werden. Anstatt diese Position absolute Attribut zu beiden Klassen hinzuzufügen, lassen Sie uns sie zu Produkten hinzufügen. Also werden wir sagen, Produkt, sie werden beide eine absolute Position haben. Wir wissen auch, dass wir unsere Bild-Positionsrate dort halten wollen, wo sie ist. Also lassen Sie uns sprechen 20 Pixel. Aber wir müssen auch festlegen, wo die Beschreibung Ursache ist. Im Moment wird die Beschreibung hinter diesem Produktbild mit einer Spitze von Null als auch versteckt. Also wolltest du eigentlich nicht mehr auf der Seite sein. Also lassen Sie uns ihm einen Wert von 250 Pixel geben. Und wie Sie sich wahrscheinlich erinnern werden, das ist genau unten, wo der Daumen abschneidet. Also, wie sollen wir es schaffen? Wenn wir also den Mauszeiger über dieses Bild bewegen, bewegt sich die Beschreibung nach oben, um ihren Platz einzunehmen , Nun, Sie haben vielleicht erraten, dass wir einen Mauszeiger verwenden und das Bild ausrichten. Zuerst werden wir Bild sagen und wir werden nur die Spitze auf negative 250 fix ALS setzen. Jetzt, wo wir das getan haben, sehen wir, wenn wir sie über haben, wird dieses Bild vom Bildschirm genommen. Aber Beschreibungen werden nicht angezeigt, also Jäten, um das auch zu beheben. Und wir werden nur die 20 besten Pixel einstellen, die Beschreibungen erscheinen, wenn wir sie haben. Also, das ist gut. Aber wie sollen wir das animieren? Wir wissen bereits über die Übergangseigenschaft, aber lassen Sie uns wirklich schnell darüber sinken, wo wir dies hinzufügen möchten, um das Bild und die Beschreibung zu treffen , aber es wird irgendwie ein Schmerz sein, diese Übergangseigenschaft an beide Klassen Also gehen wir einfach zurück zu dieser Produktklasse, in der Sie die Position toe absolut festgelegt haben. Und fügen wir einen Übergang dort und die Eigenschaft hinzu, wir übergehen als top. Lassen Sie uns darauf eingehen. Lassen Sie uns eine Sekunde geben und lassen Sie uns die Lockerung auf Leichtigkeit setzen. Und jetzt, wenn wir die Dinge hinter uns haben, gleiten sie beide zusammen hoch. Aber das sieht immer noch ein bisschen seltsam aus. Ich wollte eigentlich so aussehen, als ob die Beschreibung vor dem Produktbild nach oben gleitet . Also, wie konnten wir das tun? Nun, wir könnten verschiedene Übergangseigenschaften verwenden, um diese Beschreibungsklasse schneller als das Produktbild zu bewegen . Aber das ist nicht sehr effizient, das zu zwei verschiedenen Selektoren hinzuzufügen. Stattdessen lassen Sie uns das Bild anvisieren, und wir werden nur den Wert für die Übergangsverzögerung auf 0,5 Sekunden setzen, und jetzt sehen wir, dass sie separat animieren. Lasst uns die Dinge ein bisschen beschleunigen. Um das ein wenig sauberer zu machen, lässt es den Übergang verzögert eine Sekunde ernennen und lassen Sie uns den oberen Übergang auf 0,6 Sekunden setzen, und jetzt ist es viel knapper, und Sie können tatsächlich sagen, dass diese Beschreibung Div in vor dem Bild. Dave. Fühlen Sie sich frei, mit diesem Code herumzuspielen, wenn Sie möchten. Aber wenn Sie bereit sind, springen wir in das dritte Beispiel. 5. Animierte Modale mit Pure HTML/CSS: In Ordnung, lasst uns mit einem Beispiel beginnen. Drei. Das sieht ein bisschen vertraut aus, nicht wahr? Wenn Sie sie über die Schaltfläche haben, können Sie sehen, dass es sich um dieselbe Seite handelt, die wir zuvor bearbeitet haben. Aber wenn wir uns den HTML-Code ansehen, gibt es hier ein paar andere Sachen vor sich. Es sieht so aus, als gäbe es irgendwo ein Formular auf der Seite. Lassen Sie uns die Sichtbarkeit zwei sichtbar machen, nur damit Sie sehen können, wie es aussehen wird. Wir können sehen, dass wir E-Mail, Adresse, einen Namen, einen Submit-Button und ACLU Button haben werden. Aber wir müssen einen Weg finden, um dieses Formular tatsächlich erscheinen zu lassen, wenn wir auf diese Schaltfläche klicken . Also, wie kannst du das machen? zuerst diesen H ref setzen, Lassen Sie unszuerst diesen H ref setzen,um unser Metalldef anzusprechen. Wenn Sie schon einmal Wut Links gemacht haben, ist das ziemlich dasselbe. Also haben wir das immer noch nicht getan, weil wir das Formular übermäßig sichtbar einstellen müssen, wenn es angestrebt ist. Wie können wir das tun? Nun, stellt sich heraus wie Schweben. Sie können Formularüberlagerung auswählen, wenn es gezielt ist, und ich wollte dafür tun, ist die Sichtbarkeit zu sichtbar, und jetzt klicken wir auf die Schaltfläche, unsere fremden erscheint, und wenn Sie schließen klicken, geht es entfernt. Jetzt, wo wir das eingerichtet haben, wie können wir das zu einem Übergangseffekt machen? Nun, lassen Sie uns versuchen, es so einzurichten, wie wir es mit den anderen Beispielen getan haben. Sie können sehen, dass es diesen Übergang nicht wirklich macht, und der Grund, warum es nicht tut, ist, weil, wenn Sie darüber nachdenken, wie können wir wirklich von einer Sichtbarkeit von Sichtbarkeit von sichtbar zu einer Sichtbarkeit von versteckten übergehen? Was ist der Schritt zwischen ihrem CSS nicht weiß, also müssen wir es tatsächlich etwas an Feind geben. Und wenn Sie etwas über CSS wissen, denken Sie wahrscheinlich an die A-Pass-Funktion hier. Lassen Sie uns also unsere Standardformular-Overlay-Kapazität von Null geben. Und lassen Sie uns unsere gezielte Form-Overlay-Kapazität von was geben? Und keine Frau klickt auf den Knopf. Wir werden es sehen. Es verblasst tatsächlich sehr cool, aber das ist nicht alles, was wir tun wollten. Wir wollen auch nach unten rutschen, wenn wir darauf klicken. Also, wie können wir das tun? Nun, zuerst müssen wir diese Formklasse auf relativ setzen. Geben wir ihm eine Position von relativen und, sagen wir, seinen Anfangszustand, um eine Spitze von negativen 300 Pixeln zu haben. Auf diese Weise ist es total bis zum Bildschirm. Jetzt, wenn dieses Formular übermäßig ausgerichtet ist, wollen wir das Formular oben ändern und es auf Null Pixel setzen. Und dann werden wir nur eine Übergangsklasse hinzufügen, um sie zu bilden. Jetzt können wir dich sehen. Wenn Sie darauf klicken, gleitet es tatsächlich nach unten. Ja, Sir. In Ordnung. Sie haben also ein Beispiel abgeschlossen. Drei. Fühlen Sie sich frei, um mit der Form etwas mehr durcheinander zu bringen. Vergessen Sie nicht, es in Ihrem Projekt zu speichern und lassen Sie uns in unser letztes Beispiel übergehen. 6. Codepen Copycat: Transformation mit CSS: Alles klar. Also für unser viertes Beispiel wollte ich versuchen, etwas zu implementieren, von dem ich tatsächlich denke, dass es wirklich cool über Code Pin ist. Sie werden feststellen, dass Sie die Größe dieser Felder ändern können, und wenn eines von ihnen zu klein wird, der Überschrifentext angezeigt, wird tatsächlich kleiner und bewegt sich in das Websitefenster. Also hier haben wir nur eine wirklich einfache Webseite mit irgendeiner Art von Text, und wir wollen es so machen, dass diese Überschrift das gleiche tut, was Pen tut, wenn die Browserhöhe zu klein ist. Also lasst uns darüber nachdenken, wie wir das tun können. Zunächst lassen Sie uns beginnen, indem Sie diese Überschriftenklasse in den endgültigen Zustand anpassen, in dem Sie es haben möchten , und um das zu tun, würde tatsächlich eine neue Eigenschaft namens Transform verwenden. Wenn Sie noch nie transformiert haben, ist es tatsächlich eine wirklich praktische Eigenschaft, die sehr nützlich ist, wenn Sie mit Animationen arbeiten . natürlich Beachten Sienatürlichdie Präfixe des Anbieters , wenn Sie sie in Ihren eigenen Webseiten implementieren. Aber wieder für diese Klasse gehe ich davon aus, dass Sie den aktuellsten Browser haben, Sie verwenden und transformieren können, wird in allen aktuellen modernen Browsern ohne Anbieterpräfixe unterstützt . Also lasst uns einfach reinspringen und anfangen, es zu benutzen. Es gibt viele verschiedene mögliche Werte, die wir übergeben können. Es gibt zwei D-Transformationen sowie drei D-Transformationen, aber wir werden es für dieses Beispiel ziemlich einfach halten. Also zuerst, lassen Sie uns gehen und wählen Sie sind Überschrift, und wir werden nur anfangen, transformierte Eigenschaften auf sie anzuwenden. Also zuerst wissen wir, dass es um 90 Grad nach unten gedreht wird. Um dies zu tun, können wir einfach sagen, 90 die E G für Grad, und Sie können sehen, dass es bereits auf der Seite aktualisiert wird 90 Grad gedreht. Aber hier passiert etwas Seltsames. Sie werden feststellen, dass es tatsächlich in der Mitte dieses Bildes rotiert, wo , wirklich, wenn wir wollen, dass es in dieses Seitenbit kommt, wir tatsächlich wollen, dass es vom Anfang des Elements rotiert. Also, wie können wir das tun? Es gibt tatsächlich eine Eigenschaft, die wir verwenden können, um den Ursprung dieser Transformation festzulegen. Wenn Sie alles in Programmen wie Fotoshopper Illustrator arbeiten, wissen Sie wahrscheinlich, wovon ich spreche, wenn ich sage, den Ursprungspunkt für eine Transformation festzulegen . Aber wenn nicht,werden wir hier sehr bald sehen können. Aber wenn nicht, Also lassen Sie uns voran und nennen diese Transformationsursprungseigenschaft, und wir werden es auf Mitte setzen, weil wir die Höhe zentriert wollen. Aber wir wollen, dass der horizontale Aspekt davon übrig bleibt. Und jetzt können Sie sehen, dass es tatsächlich in die Seitenwand verschoben wurde, denn wo es von der Mitte überging, geht es jetzt vom ganz linken Punkt. So dass Picks sieht ein wenig fehl am Platz dort, und auch wir können sehen, dass diese Spitze hier ist immer noch zeigt all seinen Raum. Und ein Teil des ganzen Grund für die Implementierung ist, wenn die Browserhöhen zu klein sind. Wir wollen Platz sparen. Also lassen Sie uns voran und stellen Sie die Höhe der Überschrift ein 20 Pixel. Und jetzt auf diese Weise, Leerzeichen entfernt. In Ordnung, also sind wir noch nicht fertig mit der Transformation. Lassen Sie uns voran und geben Sie einen anderen Wert und Geschicklichkeit in diesem Text ein wenig. Sofort. Es hat eine Skala von eins und lässt es einfach auf eine Skala von 0,5 setzen und jetzt ist es viel kleiner. Endlich müssen wir einen Weg finden, um diesen Text hier zentriert zu bekommen. Offensichtlich könnten wir das mit etwas Positionierung tun. Aber es gibt tatsächlich eine eingebaute Funktion in Transformation namens Translate. Und was das tut, ist, bewegt sich um ein Element durch horizontale und vertikale Werte, ähnlich wie Position. Also werden wir einfach anrufen, übersetzen, und wir werden vorbeikommen. Sagen wir einfach 20 Pixel, um mit zu beginnen, und wenn wir sie Null und 20 vergleichen, können wir sehen, dass es sich nur vertikal bewegt. Vorerst wollen wir es auch horizontal verschieben, also fügen wir negative 25 Pixel hinzu. Jetzt können Sie sehen, dass es ein wenig nach oben verschoben ist, Ordnung, also jetzt ist der Text horizontal zentriert, aber wir wollen immer noch, dass es eine Art Linie zu diesem Textfeld hier vertikal ist. Lassen Sie uns das auf 60 ändern, also haben wir jetzt die Überschrift dahin gesetzt, wo wir es wollen, wenn die Browserhöhe klein genug ist . Aber jetzt müssen wir tatsächlich wieder in die Standardwerte hinzufügen. Lassen Sie uns also eine Medienabfrage machen, und wir werden sagen, wenn der Bildschirm größer als 400 Pixel ist, werden wir einige Änderungen an jedem vornehmen. Also wissen wir bereits, dass wir im Grunde die Transformation rückgängig machen werden, die wir zuvor im Dokument gemacht haben . Und was wir tun könnten, ist, gehen Sie voran und kopieren Sie all dies und fügen Sie es hier ein, setzen Sie die Drehung auf Null, setzen Sie die Skala zurück Zehe eins und sagte, dass übersetzt auf Null. Und dann, wenn unser Bildschirm groß genug ist, ist er wieder da, wo er angefangen hat. Oder um die Dinge ein wenig einfacher zu machen, können wir die Transformation einfach auf ihren Standardwert setzen und dasselbe passiert. So haben wir auch bemerkt, dass, wenn der Bildschirm hoch genug ist, diese Höhe immer noch fehlt. Also gehen wir voran und wieder rein und wir können tatsächlich das gleiche tun hier und nur die Höhe anfänglich. Und jetzt haben wir solche zwischen diesen beiden Staaten. Jetzt, da wir das eingerichtet haben, können wir etwas tun, das sich wahrscheinlich ein bisschen vertraut fühlt , und jedem einen Übergang hinzufügen. Also werden wir all diese Eigenschaften, die sich verändert haben, umstellen. Geben wir es 0,38 Sekunden, um das zu tun. Lasst es uns erleichtern. Jetzt. Wir sehen einige der gleichen Funktionalität, die Pin hat könnte. Ich möchte es tatsächlich so aussehen lassen, wenn dies ändert, dass Textfelder tatsächlich nach oben gleiten . Um das zu tun, lassen Sie uns hier mit dem Polster um diese Formulargruppe herum spielen. Also lasst uns das aus dem Don't at it Code holen und es vor einer Medienabfrage ablegen. Und was ich tun möchte, ist, wenn die Dinge tatsächlich so zusammengebrochen waren. Ich möchte, dass wir diese obere Polsterung auf Null und lassen Sie die 20 Pixel klopfen auf der Unterseite in auf der Seite, so dass es schön ist, das Quadrat so. Aber wenn es erweitert wird, dass das Streicheln zurück, ist es jetzt. Wir bekommen diesen schönen Platz, wenn wir ihn haben, und wenn wir es nicht tun, bricht er zusammen. Lassen Sie uns einen Übergang davon hinzufügen, damit es so aussieht, dass Textfelder nach oben gleiten. Also werden wir nur sagen Übergang Patty, Lassen Sie uns 1/2 eine Sekunde und sagte, es Leichtigkeit. Und jetzt wird es wirklich so aussehen, als würde die Kiste verdammt hoch rutschen! Basierend auf dem Text, der sich bewegt. Dort gehen Sie, Sie haben Beispiel für auf abgeschlossen. Das ist das Ende der offiziellen Beispiele. Aber wenn du noch mehr damit spielen willst, werden wir eigentlich ein wenig über diese Leichtigkeit reden, auf die wir all deine Übergänge eingestellt haben . Und einige Möglichkeiten, wie wir tatsächlich mit dem herumspielen können, um ein paar wirklich knackige Effekte zu bekommen. Also, wenn Sie daran interessiert sind, gehen Sie zum nächsten Abschnitt, ähm, aber wenn nicht, zögern Sie nicht, bis zum Schluss zu springen. 7. Kleide deine Animationen mit Cubic Bezier!: In Ordnung, springen wir zurück in unser drittes Beispiel und sprechen ein wenig über diesen Leichtigkeit Wert, den wir in den Übergang übergegangen sind. Grundsätzlich, wenn Sie jemals ein Programm wie Aftereffects zuvor verwendet haben, erkennen Sie wahrscheinlich eine besetzte Kurve und einen Übergang. Hat diese Fähigkeit zu jedem, den wir setzen Leichtigkeit tatsächlich eine der wenigen vorbestimmten beschäftigten A-Bordsteine in CSS angeben . Und das ist Leichtigkeit hier. Ich habe Leichtigkeit und nur einen regelmäßigen linearen Übergang eingerichtet. Schauen wir uns an, wie diese über zwei Sekunden miteinander vergleichen . Wie Sie sehen können, brauchen beide zwei Sekunden, um zum Endpunkt zu gelangen. Aber mit der Leichtigkeit beschleunigt es sich in der Mitte und verlangsamt sich ganz am Ende. Es sieht also in gewisser Hinsicht so aus, als würde es sich schneller bewegen. Jetzt können wir viele wirklich coole Dinge damit machen und einfach wirklich damit herumspielen, so dass wir einige verrückte Werte wie diese setzen können, wo es tatsächlich über den Übergang ein wenig zu schießen ist. Wir können es in der Mitte stoppen lassen, aber für unser mittleres Beispiel wollte eigentlich nur irgendwie ein bisschen überschießen, gerade gegen Ende. Also schauen wir uns an, wie das aussehen könnte. Ja, ich denke, das wird ziemlich nett sein. Also, jetzt können wir tatsächlich einfach kopieren diesen ganzen Text springen zurück in unser Beispiel, und lassen Sie uns einfach die Form Animation mit diesem kubischen belebten ersetzen. Und jetzt, wenn wir darauf klicken, können Sie sehen, dass es tatsächlich über das Schießen selbst ein wenig cool ist. Es gibt eine Menge wirklich coole Dinge, die Sie mit kubischen beschäftigten tun können, so dass ich definitiv fühle mich frei, um mit denen zu spielen. 8. Die nächsten Schritte!: und das war's. Sie beenden den Kurs später in diesem Monat, ich werde tatsächlich Teil zwei dieses Kurses veröffentlichen, der Ihnen einige coole neue Konzepte wie Schlüsselbilder, Animieren skalierbarer Vektorgrafiken und Wiederverwendung von Animationen in verschiedenen Teile Ihrer Webseite und sogar auf verschiedenen Websites vollständig. Also bleiben Sie dran dran. Vergewissern Sie sich, dass Sie mir folgen, und wir sehen uns dann.