Partager une bibliothèque d'animation CSS3

Introduction

animate.css est une bibliothèque d'animation CSS3 de l'étranger Elle a des tremblements et des flash prédéfinis. Il existe plus de 60 effets d'animation. tels que rebondir, retourner, faire pivoter (rotateIn/rotateOut), fadeIn/fadeOut, etc., couvrant presque tous les effets d'animation courants.

Bien qu'il soit très pratique et rapide de créer des effets d'animation CSS3 à l'aide d'animate.css, il est toujours recommandé de jeter un œil au code d'animate.css, vous pourrez peut-être en tirer des leçons.

Compatible

Compatibilité des navigateurs : bien sûr, il n'est compatible qu'avec les navigateurs qui prennent en charge la propriété d'animation CSS3. Il s'agit de : IE10+, Firefox, Chrome, Opera et Safari. .

Utilisation

1. Importez des fichiers

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

2. HTML et utilisez

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

pour ajouter . class, actualisez la page et vous pourrez voir l'effet d'animation. Animé est similaire à la variable globale , qui définit la durée de l'animation ; rebond est le nom de l'effet d'animation spécifique de l'animation, et vous pouvez choisir n'importe quel effet.

Si l'animation joue à l'infini, vous pouvez ajouter une classe infinie.

Vous pouvez également ajouter ces classes aux éléments via

JavaScript ou jQuery, comme par exemple :

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

Certains effets d'animation finiront par rendre le element not On peut voir que, comme le fondu, le glissement vers la gauche, etc., vous devrez peut-être supprimer la classe

, par exemple :

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

Les paramètres par défaut d'animer. css peut ne pas être ce que nous voulons dans certains cas, vous pouvez donc le réinitialiser, comme :

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

Faites attention à l'ajout du préfixe du navigateur.

[Recommandations associées]

1.

Tutoriel vidéo gratuit CSS3

2.

Explication détaillée de l'animation pour l'apprentissage CSS3

3.

Enseignement CSS3 en production d'animation

4

Analyse détaillée des nouvelles fonctionnalités de CSS3

5. >Explication détaillée sur les nouvelles fonctionnalités de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!