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 <🎜 aux éléments >. 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.

JavaScript ou jQuery, comme par exemple :

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

, par exemple :

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

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

Tutoriel vidéo gratuit CSS3

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

Enseignement CSS3 en production d'animation

Analyse détaillée des 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!