Teilen Sie eine CSS3-Animationsbibliothek

Einführung

animate.css ist eine CSS3-Animationsbibliothek aus dem Ausland. Es gibt mehr als 60 Animationseffekte B. Bounce, Flip, Rotate (rotateIn/rotateOut), fadeIn/fadeOut usw., die fast alle gängigen Animationseffekte abdecken.

Obwohl es sehr bequem und schnell ist, CSS3-Animationseffekte mit Hilfe von animate.css zu erstellen, empfiehlt es sich dennoch, einen Blick auf den Code von animate.css zu werfen, vielleicht können Sie daraus etwas lernen.

Kompatibel

Browserkompatibilität: Natürlich ist es nur mit Browsern kompatibel, die die CSS3-Animations-Eigenschaft unterstützen. Dies sind: IE10+, Firefox, Chrome, Opera und Safari .

Verwendung

1. Importieren Sie Dateien

<link rel="stylesheet" href="animate.min.css">

2. Verwenden Sie

<p class="animated bounce" id="dowebok"></p>

, um <🎜 zu Elementen > hinzuzufügen class, aktualisieren Sie die Seite und Sie können den Animationseffekt sehen. animiert ähnelt der globalen -Variable , die die Dauer der Animation definiert. Bounce ist der Name des spezifischen Animationseffekts der Animation, und Sie können einen beliebigen Effekt auswählen.

Wenn die Animation unendlich abgespielt wird, können Sie die Klasse „Unendlich“ hinzufügen.

Sie können diese Klassen auch über

JavaScript oder jQuery zu Elementen hinzufügen, wie zum Beispiel:

$(function(){
    $('#dowebok').addClass('animated bounce');
});

Einige Animationseffekte werden schließlich dazu führen Element nicht Es ist ersichtlich, dass Sie möglicherweise die Klasse

löschen müssen, z. B. beim Ausblenden, nach links gleiten usw., zum Beispiel:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

Die Standardeinstellungen von Animate. In einigen Fällen ist CSS möglicherweise nicht das, was wir wollen. Sie können es also zurücksetzen, z. B.:

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

Achten Sie darauf, das Browser-Präfix hinzuzufügen.

[Verwandte Empfehlungen]

1.

Kostenloses CSS3-Video-Tutorial

2.

Detaillierte Erklärung der Animation für das CSS3-Lernen

3.

CSS3-Unterricht zum Erlernen der Animationsproduktion

4

Detaillierte Analyse der neuen Funktionen in CSS3

5 >Detaillierte Erklärung der neuen Funktionen von CSS3

Das obige ist der detaillierte Inhalt vonTeilen Sie eine CSS3-Animationsbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!