Animate.css gibt es schon seit ein paar Jahren und ich muss zugeben, dass ich ziemlich spät zur Party komme. Ich habe es erst vor ein paar Monaten entdeckt, als ich im Internet nach CSS-Animations-Tutorials gesucht habe, und fand Animate.css, den schnellsten und einfachsten Weg, um herum zu animieren.
Animate.css wurde von einem Typen namens Dan Eden erstellt und bietet eine schnelle Möglichkeit, die Funktionsweise von CCS zu überprüfen und Animationen auf Ihrer Website zu erstellen.
Animate.css wird als "CSS-Animation mit einfachem Hinzufügen von Wasser" beschrieben und bietet ein bisschen Spaß mit einer ernsthaften Seite. Sogar Amateur-Webdesigner wie ich können so die Grundlagen der CSS-Animation schnell in den Griff bekommen und einfache, aber effektive Effekte für Websites erstellen. Mit diesem Tool können Sie von einer einzelnen animierten Überschrift bis zu komplexeren Bewegungen alles erledigen.
Animate.css
Animate.css kann von GitHub heruntergeladen werden und ist im Wesentlichen eine Bibliothek mit einfachen CSS-Effekten, die an einem Ort gesammelt wurden. Jede Animation ist schön verpackt und einsatzbereit. Sie müssen lediglich die gewünschte Animation finden und die Klasse anwenden. Das ist wirklich alles was dazu gehört.
Sie müssen nicht die gesamte Bibliothek herunterladen, wenn Sie dies nicht möchten, da sich 2.500 Codezeilen darin befinden. Sie können die Website Animate.css besuchen, eine Animation finden und auf den Link Animate.css herunterladen klicken. Die Klasse wird auf eine Webseite geladen, die Sie kopieren und nach Belieben verwenden können.
Es ist jedoch einfacher, GitHub zu verwenden und einen Drilldown durchzuführen, um den gewünschten Effekt zu finden.
- Navigieren Sie zur Seite css GitHub.
- Klicken Sie auf den Link Quelle, um auf die Liste der Elemente zuzugreifen.
- Wählen Sie den gewünschten Effekttyp aus der Liste aus. Bounce ist ein Aufmerksamkeitssucher. Wählen Sie daher den Link attention_seekers.
- Wählen Sie bounce.css.
- Kopieren Sie den Code und platzieren Sie ihn auf Ihrer Seite, um die Animation anzuwenden.
So einfach ist das wirklich. Sie würden natürlich verschiedene Optionen für die verschiedenen Effekte auswählen, aber das Endergebnis ist das gleiche. Zugriff auf den Code, der für das schwere Heben auf der Seite erforderlich ist.
Erstellen eines animierten Objekts mit Animate.css
Mit Animate.css etwas Cooles zu erstellen ist einfach. Es ist nur eine Frage des Auffindens des CCS-Codes und des Hinzufügens zu Ihrem eigenen CSS. Wenn ich es kann, kann jeder!
Die erste Option auf der Seite "Animate.css" ist "Bounce". Lassen Sie uns dies in diesem Beispiel verwenden.
- Einfügen ' ' Innerhalb in Ihrem Stylesheet.
- Suchen Sie das CSS für die gewünschte Animation und fügen Sie es dem Element hinzu, das Sie animieren möchten. Zum Beispiel ' 'um diesen Bounce-Effekt zu testen, ein Bild oder was auch immer hinzuzufügen.
- Fügen Sie den folgenden CSS-Code hinzu, damit alles funktioniert. Aus der obigen Datei bounce.css entnommen.
@keyframes bounce {
von, 20%, 53%, 80% bis {
Animations-Timing-Funktion: Kubik-Bezier (0, 215, 0, 610, 0, 355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
Animations-Timing-Funktion: Kubik-Bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformieren: translate3d (0, -30px, 0);
}
70% {
Animations-Timing-Funktion: Kubik-Bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.bounce {
Animationsname: Sprungkraft;
Transformationsursprung: Mitte unten;
}
Animation mit Animate.css weiterentwickeln
Die obige Sequenz fügt einen Bounce-Effekt hinzu, wenn die Seite zum ersten Mal geladen wird. Das ist cool, aber eine einmalige Sache. Wie wäre es, wenn wir es dem Schwebeflug hinzufügen? Auf diese Weise springt es, wenn jemand über dem Test schwebt. Das würde ich auf einer Produktionswebsite nicht tun, aber es ist eine großartige Möglichkeit zu demonstrieren, wie alles funktioniert.
Fügen Sie Ihrem CSS den folgenden Code hinzu, um den Bounce-on-Hover-Effekt hinzuzufügen. Die sollte jedes Mal, wenn die Maus über dem Element schwebt, springen.
.animated: schweben {
-webkit-animation-dauer: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-dauer: 1s;
Animationsdauer: 1s;
-webkit-animation-fill-mode: beides;
-moz-animation-fill-mode: beides;
-ms-animation-fill-mode: beides;
-o-animation-fill-mode: beides;
Animationsfüllmodus: beide;
}
Wenn Sie CSS kennen, wissen Sie viel besser als ich, wie Sie verschiedene Effekte auf verschiedene Aktionen anwenden können. Als Anfänger können ich mit dieser und den in Animate.css bereitgestellten Bibliotheken einfache, aber effektive Animationen für meine Webseiten erstellen.
Ich weiß nicht, wie viele ich auf einer Live-Website verwenden würde, da sie nicht immer gut ankommen und mobile Benutzer sie anscheinend überhaupt nicht mögen. Als eine Lektion in der Funktionsweise von CSS und wie es zur Verbesserung des Webs verwendet werden kann, ist es jedoch eine großartige Ressource. Ich bin nur ein Anfänger, aber selbst ein paar Stunden mit Animate.css für dieses Tutorial zu verbringen, hat mir viel beigebracht. Ich denke, ich werde noch viel mehr damit spielen, bevor ich fertig bin. Wie ist es mit Ihnen?
