CSS3-Animationen mit Übergängen & Transformationen

1. Einführung: Hi, alle. Ich bin Kirsten Swanson. Ich bin momentan ein Fernand-Entwickler. Ordner mitbringen. Und ich bin wirklich aufgeregt, hier auf noch teilen zu sein, um Sie über CSS-Animationen zu lehren. Zuerst lassen Sie mich Ihnen ein wenig Intro über mich selbst geben. Ich begann mit dem Marketing und als mein Untergrad und gleich nachdem ich fertig war, wollte ich die Welt erkunden und reisen. Also habe ich zwei Jahre lang Englisch in Südkorea unterrichtet. Als ich in die Staaten zurückkam, war ich Ingenieurtechniker im Brunnen, fragte er die Industrie Mit dem Abschwung des Ölpreises in etwa wie 2015 beschloss ich, neue Karrierewege zu erforschen . Ich wollte nur etwas, das herausfordernder und kreativer ist. Und es war eigentlich, als ich mit einer Freundin wanderte und sie mir von der Programmierung von Bootcamps erzählte . Zuerst war ich sehr zögerlich, und ich muss nur das Wasser anpassen. Also am Ende nahm ich einige kostenlose Kurse online, und ich verliebte mich in Cody, vor allem CSS. Also, das machte mich und rollte in einem Codierung Boot Camp namens Torreon School of Software and Design und nicht für Colorado. Ich habe mich in der Front eingeschrieben und pervers, die sich für Design und die Benutzeroberfläche konzentrierte 2017 absolvierte ich den Abschluss. Und ich muss ehrlich sein, das war die beste Entscheidung, die ich getroffen habe, um den Curb Pass zu ändern. Also jetzt freue ich mich, meine Fähigkeiten und Leidenschaft von CSS mit euch teilen zu können. Dieser Kurs wird über CSS drei Animationen sein. Es enthält keine schwere Animation mit meinem Bruder und Sie wissen nicht einmal Drop Script. Aber Sie müssen die Grundlagen von CSS kennen. Also lasst uns loslegen und Spaß haben. 2. Projektübersicht: für Ihr Kursprojekt erstellen Sie eine interaktive Collage mit animierten Symbolen. Sie wählen Ihren eigenen Hintergrund sowie Symbole Wenn Sie also den Mauszeiger über die Symbole bewegen, wird es eine Art Animation geben. Eine gute Ressource ist für den Rücken. Eigene Bilder sind auf Splash. Dies ist eine große Galerie von Stockfotos sowie Pixeln und dann für Symbole. Ich benutze gerne flache Symbole sowie ich kann sie finden. Ich werde auch ein Repository in den Lektionsplan aufnehmen, und dies wird in jedem zu mull Pile Sie können hier sehen. Dies ist, wo Sie Ihre Bilder einfügen und dann auch eine stilvolle sie. Und hier werden Sie Ihre Icons positionieren. Absolute positioniert. Ich freue mich darauf, Ihre abgeschlossenen Projekte am Ende dieses Kurses zu sehen. Okay, lasst uns loslegen und mehr über CSS-Animationen lernen. 3. CSS-Animationen Übersicht: In diesem Kurs geht es um CSS drei Animationen mit Übergängen und Transformationen. Zuerst werde ich Ihnen einen breiten Überblick über CSS drei Animationen geben, und dann werde ich Übergänge und dann Transformationen durchlaufen. Und schließlich werden wir eine Life-Beschichtung machen. Danach wird Ihr Projekt Ihre eigenen Innovationen machen. Also zuerst, CSS drei Innovationen bieten viel Wert für Ihre Schnittstellen. Sie können visuelles Feedback geben, das sie entzückend machen. Mikrointeraktionen in diesen Fällen können in der Regel zu unvergesslichen Interaktionen für Benutzer werden. CSS drei Animationen ändern das Aussehen oder Verhalten Ofenelement, wenn sich sein Zustand ändert, ändert, so dass dies wie ein Hover oder Fokus oder aktiver Zustand sein könnte. Die Animationen sollten in subtilen Bewegungen einfach sein. Sie sollten konsistente Animationen sein, und sie sollten die Benutzererfahrung verbessern und nicht davon ablenken. Siehe auch Verwendungszwecke. Drei Animationen sind großartig, weil sie kein Java-Skript oder eine Animationsbibliothek benötigen. Hier sind einige Tabellen von Kann ich Website in verwenden? Dies zeigt nur, dass CSS drei Übergänge und Transformationen zu Recht in mehreren Browsernunterstützt werden Browsern 4. Übergänge Beschreibung: Also zuerst gehe ich über Übergänge, und er macht Elemente reibungslos und allmählich über eine bestimmte Dauer ändern. Wenn Sie also keinen Übergang auf einem Element haben, wenn es transformiert wird, ändert sich es abrupt. Es wird kein fließender Übergang sein haben Sie normalerweise Wenn Sie also eine Transformation haben, einen Übergang. Es gibt vier Übergangs-Eigenschaften. Sie sind Übergang, Eigenschaftsübergang, Dauer, Übergangszeit und Funktion im Übergang. Verzögern Sie eine saftige die erste zu jener Luft, die für Übergänge erforderlich ist. Die anderen beiden sind notwendig. Um einen Übergang zur Arbeit zu ermöglichen, können Sie entweder jede Eigenschaft einzeln oder Sie können die Kurzschrift verwenden, und das wird für schnelleren und saubereren Code empfohlen. 5. Transition: Jetzt werden wir über die einzelnen Übergangseigenschaften sprechen, also ist die erste 1, die erforderlich ist, die Übergangseigenschaft und die gibt die Eigenschaft an, die übergeht werden soll. Nehmen wir an, wenn Sie die Rahmenfarbe oder Baccarin-Farbe möchten, geben Sie sie hier an. Andernfalls ändern Sie, wenn Sie den Wert aller angeben, alle Eigenschaften, die animiert werden könnten. Hier ist eigentlich eine Liste aller verschiedenen Eigenschaften, die animiert werden können, so dass Sie sehen können, dass es eine ziemlich große Liste ist. Weiter ist eine Übergangsdauer, und a gibt die Zeitspanne des Übergangs an, und dieser Wert wird in Sekunden geschrieben. Die Übergangszeitfunktion gibt die Geschwindigkeit des Übergangs über die Dauer an. Standardmäßig ist es auf einfache Weise eingestellt. Die anderen Optionen umfassen lineare Leichtigkeit in der Leichtigkeit heraus. Er ist in out in kubisch belebter kubischer belebter ermöglicht es Ihnen, Ihre eigene Timing-Kurve zu definieren. Also schauen wir uns diesen Spickzettel an, um dir zu zeigen, wie das aussieht. Also genau hier diese Luft verschiedene kubische macht Ohren. Sie können sehen, dass die Übergangstiming alle unterschiedlich sind. Wenn Sie den tatsächlichen Code erhalten wollten, dann könnten Sie darauf klicken und dann können Sie jedes Jahr sehen, dass dies die tatsächliche Timing-Funktion ist , die Sie benötigen würden. Also wäre das so, als wäre er drin oder er ist draußen. Die letzte ist die Übergangsverzögerung, und dies gibt an, wann die Transformation standardmäßig gestartet wird. Der Übergang beginnt, sobald die Zustandsänderung auf dem Element ausgelöst wird. Nehmen wir also an, wenn Sie mit der Maus über ein Element beim Hover fahren, wird es sofort ausgelöst, aber Sie können eine Verzögerung darauf setzen, und es würde sofort ausgelöst werden. 6. Beschreibung verwandelt sich die Beschreibung: jetzt werden wir über Transformationen sprechen. Dies ist, wenn sich ein Element bewegt oder ändert und das Aussehen. Die wichtigsten Arten von transformiert unsere Drehen, Schrägskalieren und übersetzen. Drehen ist, wenn ein Element im Uhrzeigersinn oder gegen den Uhrzeigersinn gedreht wird, und dies wird durch die Anzahl der Grad angegeben. Skew ist, wenn ein Element auf der Grundlage der Werte auf der X- und Y-Achse neigt. Dies wird auch durch die Anzahl der Grade angegeben. Skalierung ist eins in Element erhöht oder verringert, und dies ist durch eine ganze Zahl basierend auf der Höhe und Breite des Elements. Übersetzen ist, wenn sich ein Element nach rechts, links nach oben oder unten bewegt , und dies wird durch Pixel angegeben. Sie können mehrere Transformationen kombinieren, sodass Sie ein Element haben können, das übersetzt und gedreht wird . Schließlich ist der Transformationsursprung von der transformierten Eigenschaft getrennt, kann aber in Verbindung mit dieser Eigenschaft verwendet werden , um die Position anzugeben. Ursprung der Transformation 7. CSS und Objektbewertung: bevor Sie auf die Lebensbeschichtung übergehen. Lassen Sie uns einfach CSS-Selektoren und Eigenschaften überprüfen, so dass Sie Ihr Element haben. Es könnte Ihr P-Tag oder Ihr Header-Tag oder Ihr div sein. Dann haben Sie Ihre Eigenschaft, die Ihre Farbe Hintergrundfarbe Rahmen sein wird, und dann haben Sie die hier angegebenen Werte. Wenn wir also über Übergänge und Transformationen sprechen, werden das unsere Eigenschaften sein. Also hier, in einem Übergang, werden Sie es als Ihre Eigenschaft angeben. Und dann werden dies die Werte für eine Transformation sein. Sie werden angeben. Hier ist die Eigenschaft, und dann könnten die verschiedenen Werte gedreht werden. Sie übersetzen oder skalieren, um den Zustand einer Elementänderung visuell sehen zu können. Wir werden die Hover-Pseudo-Klasse verwenden, also werden wir dies am Ende des Elements setzen. Sie haben also das Element als einen Doppelpunkt als schweben. Dann haben Sie Ihr Eigentum und dann Ihren Wert. So zum Beispiel gibt es zum Beispieleine Link-Klasse in. Wenn Sie ah haben, schweben Sie mit der Pseudo-Klasse darauf, wird es blau, wenn Sie darauf schweben. Jetzt lassen Sie uns weitermachen und tatsächlich etwas Leben Beschichtung 8. Übergangsplanung: okay auf die Live-Beschichtung. Ich benutze hier die Bewältigung. Es ist ein kostenloser Online-Editor in Ihrem Browser gefunden, also werden wir zuerst über Übergänge sprechen, wird das Quadrat verwenden und Animation darauf setzen. Also fügen wir zuerst die Hover-Pseudo-Klasse hinzu, damit wir sehen können, wann sich der Zustand ändert. Wie wäre es, wenn wir die Hintergrundfarbe ändern? Nun, sagen Sie zu einem hübschen Lila, aber Sie können sehen, wenn Sie darauf schweben. Es ist eine wirklich abrupte Veränderung. Es ist nicht glatt, also kommt hier der Übergang in die Hand. Also werden wir die Abkürzung des Übergangs verwenden, weil das zu diesem saubereren, schlankeren Code geht . Und wenn Sie sich richtig erinnern, werden Sie zuerst die Eigenschaft setzen, wenn Sie Föderation setzen, dann die Timing-Funktion und schließlich die Verzögerung. Es gibt eine bestimmte Reihenfolge, und Sie möchten sicherstellen, dass Sie es in der richtigen Reihenfolge tun. Lassen Sie uns also einen Übergang für diese Hintergrundfarbe in der Hintergrundfarbe hier angeben weil es die Eigenschaft ist, die wir ändern. Und sagen wir, wir wollen, dass das fünf Sekunden dauert. Mal sehen, was Bacca ist, dass es jetzt ein reibungsloser Übergang ist. Es ändert sich nicht so schnell. Nach den Kampf-Sekunden können wir eine Timing-Funktion setzen. Lass uns die Schlüssel anlegen, Bruder. Dadurch wird das Erscheinungsbild des Übergangs geändert. Schließlich können Sie eine Verzögerung setzen. Lassen Sie uns eine zweite Verzögerung setzen, wenn Sie also auf dem Platz schweben, wird es nicht sofort Farben ändern. Siehst du, wie das Lila nicht sofort stattgefunden hat? Es liegt daran, dass es eine Sekunde des Schwebeens auf dem Platz braucht, bevor es sich tatsächlich ändern wird. Lassen Sie uns eine weitere Eigenschaft zu diesem Quadrat hinzufügen. Wir werden eine Grenze haben, aber das wird zu einer violetten Grenze. Jetzt wollen wir auch die Grenze auf dem Hover ändern. Ändern Sie dies in ein Grün. Wie Sie sehen können, ändert sich der Rahmen nicht gleichzeitig mit dem Hintergrundbild. Dies liegt daran, in unserem Übergang wurden nur die Hintergrundfarbe angegeben. Da wir also auch die Grenze ändern, können wir hier alles sagen und beide sollten sich gleichzeitig ändern. Jetzt 9. Hinzufügen von Vendor für ältere Browser für ältere Browser: Es gibt so viele verschiedene Eigenschaften, die Sie ändern können. Abgesehen von nur der Farbe, wie die Liste, die ich Ihnen früher gezeigt habe, können Sie die mit dem hohen Rand Padding so viele verschiedene Eigenschaften ändern, dass Sie animen können . außerdem Wenn Sie Übergänge und Transformationen verwenden, möchten Sieaußerdemsicherstellen, dass Sie die Präfixe des Herstellers wie Web Kit, Mozilla Opera und Internet Explorer für Transformationen hinzufügen , und dies ist, um ältere Browser zu unterstützen. 10. Transform transformieren: Jetzt bewegen wir uns in Transformationen, was ich denke, ist der lustigere Teil von Animationen, weil Sie bekommen, um das Aussehen von Elementen zu ändern , und Sie bekommen, um sie bewegen zu lassen. Also zuerst gehe ich über rotieren, also setzen wir eine Transformation auf die Quadrate. Wird Roque achten, Ähm, und die Sechs, der Wert von Grad. Wie wäre es, wenn wir 50 Grad machen? Wenn wir also schweben, drehen sich diese Elemente um 50 Grad und Sie sehen, es ist kein sehr fließender Übergang, also bedeutet das, dass wir einen Übergang darauf setzen müssen. Lass es uns eine Sekunde geben. Sie können jetzt sehen, dass die Bewegung glatt ist. Nehmen wir an, wir wollen gegen den Uhrzeigersinn gehen wird ein Negativ auf diesen Grad setzen. Was, wenn wir wollen, dass sie wirklich schnell ausgeben? Lassen Sie uns ein größeres Maß an dieser Sache machen. Das macht eine Menge Spaß. 11. Skew transformieren: Die Skew-Transformation ähnelt der Rotationstransformation und nimmt Grad an, da der Wert sq ist, wenn ein Element basierend auf den angegebenen X- oder Y-Werten geneigt wird. Also die Schrägeier, dies wird basierend auf der X-Achse schief sein. Lass es uns 10 Grad ausdrücken. Wenn es eine positive Zahl ist, wird es nach links sagen. Wenn es negativ ist, neigt es nach rechts. Jetzt mit dem hier. F: Warum wird dies auf dem Warum Zugriff gekippt werden? Also, wenn es eine positive Zahl ist, wird es schief nach unten. Und wenn es negativ ist, wird es unfreundlich verzerren. Wenn Sie nur die Schrägstellung angeben, wird das Element basierend auf der X-Achse schräg in den Ruhezustand versetzt. Aber Sie können auch in den VAE setzen, dass alles, was Sie hören, gut ist und es wird Berks 25 Grad auf der X-Achse und dann 10 Grad auf der Y-Achseschiefen auf der X-Achse und dann 10 Grad auf der Y-Achse 12. Scale umwandeln: genau wie die Skew-Transformation kann die Skalierungstransformation auf die X- und Y-Achse transformiert werden. Diese Skala nimmt einen Wert von einer Zahl, also lassen Sie uns die Zahl eingeben, um zu sehen, was passiert. Element erhält die doppelte Größe seiner ursprünglichen Größe, und Sie können auch sehen, dass diese Änderung nicht sehr glatt ist. Also lassen Sie uns voran und fügen Sie einen Übergang hinzu. CNN wird ihm eine Dauer von einer Sekunde geben. Wie es sehr glatt ist. Okay, wie wäre es, wenn wir das Element verkleinern, damit wir die Hälfte der Größe davon setzen. Wie wäre es, wenn wir die Fertigkeit auf die X-Achse ändern? Und wir können es auch ändern, um das Warum oder die Kurzschrift hier können wir in diesem X-Wert in den Y-Wert setzen , und das Element wird auf beiden Achsen geändert werden. 13. Translate transformieren: Die letzte Transformation, die ich diskutieren werde, ist die Translate Transformation. Ich habe das Gefühl, dass diese Transformation viel in dir verwendet wird. Ich, zum Beispiel, insgesamt, zitiert und oder eine Bestätigung Feedback erscheint. Ich fühle mich oft, dass wir viele Objekte haben, die Zehenelemente im Display erscheinen. Die Transformationstransformation verschiebt ein Objekt auf der Y-Achse oder rechts oder links auf der X-Achse nach oben oder unten . Also lasst uns hier mit diesem Kreis spielen. Wir werden es X übersetzen, und der Wert, der hier eingeht, ist in Pixeln. Also lassen Sie uns 20 Pixel eingeben, und das wird das Element nach rechts gehen lassen. Sie können sehen, es ist ein wenig zuckend, also lassen Sie uns einen Übergang gehemmt Dauer der Mönche Sekunden viel besser und glatter hinzufügen. Okay, also jetzt, wenn wir in diesem Fall Ihr Negativ bekommen, wird das Element nach links gehen. Nun, wenn wir übersetzen, warum das Element nach oben gehen wird und wenn es eine positive Zahl ist, wird das Element nach unten gehen. Sie können auch die Kurzversion von Translate in verwenden. Das Element wird nach rechts gehen. 20 Pixel in 30 Pixel nach unten. Ok. Ich denke, das ist ein guter Zeitpunkt, dass wir mit all diesen Kreisen experimentieren können und wir werden auch mit der Timing-Funktion spielen. Wir können sehen, wie die Bewegung dieser Kreise unterschiedlich sein kann, wenn Sie eine andere Timing-Funktion in setzen . Also werden wir all diese Kreise bewegen, wenn der ganze Container schwebt. Wie wäre es, wenn wir den genauen Zugriff um 300 Pixel bewegen? Also werden alle Kreise 300 Pixel bewegen? Und wie Sie sehen können, ist es nicht sehr glatt. Lassen Sie uns also Übergänge zu all diesen Kreisen. Indem Sie diesen Übergang hinzufügen, wird es ein glatter, wie Sie sehen können, sie gehen alle mit der gleichen Geschwindigkeit. Aber lassen Sie uns eine Timing-Funktion gut setzen. Experimentieren Sie mit den verschiedenen, die wir haben. Lass es uns sagen, Feeds. Er ist dran, es lässt aus, er ist und raus, du weißt, wann du in Funktion kommst. Diese machen also nur die Geschwindigkeit der Übergänge anders. Also mal sehen, was das tut. Jetzt. Sie können sehen, dass sich diese Kreise mit unterschiedlichen Geschwindigkeiten bewegen. Das liegt an der Timing-Funktion, die wir gerade hinzugefügt haben. Also übersetzen ist eine sehr mächtige Transformation, und ich habe das Gefühl, dass wir es viel verwenden können in Sind Sie ich und wirklich verbessert die Benutzererfahrung 14. Mehrere Transformationen kombinieren: Vergessen Sie nicht, Sie können mehrere Transformationen miteinander kombinieren. Du schreibst sie in der Reihe wie diese, ohne dass ein zynisches sie trennt. Aber denken Sie daran, dass Sie Ihren Endbenutzer im Auge behalten und deren Erfahrung verbessern möchten, anstatt sie so zu überwältigen . Schweben Sie hier. Nun, herzlichen Glückwunsch, Guides. Du beendest den Kurs. Ich hoffe, Sie werden kreativ mit Ihrem Projekt. Und ich freue mich darauf, Ihre fertige Arbeit zu sehen. Hoffentlich war dieser Kurs zu CSS-Animationen aufschlussreich und in Zukunft. Wir werden in der Lage sein, Ihnen schöne Momente hinzuzufügen. Ich danke nochmals für die Teilnahme an meinem Kurs, und ich hoffe, Sie haben viel gelernt.