IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

CSS3 : animations visuelles avec Animate.css

Apprenez à créer des animations visuelles en CSS grâce à Animate.css

Ce tutoriel va vous apprendre à créer des animations visuelles en CSS à partir du projet Animate.css

11 commentaires Donner une note à l´article (4.5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Css animate effects we can learn from Animate.css.

II. Introduction

Dans ce tutoriel nous allons voir comment créer des animations visuelles attrayantes en CSS pour les utilisateurs grâce au projet Animate.css. Nous allons nous intéresser à plusieurs des plus populaires animations parmi les 53 que le projet propose, et ainsi proposer le code CSS correspondant à ces animations.

III. Animate.css

Le projet Animate.css peut être téléchargé sur GitHub : Animate.css.

Vous pouvez consulter la démonstration de Animate.css afin d'avoir un rendu dans un navigateur.

IV. L'animation « flash »

L'animation « flash » permet d'afficher et de masquer un élément grâce à la propriété CSS opacity.

 
Sélectionnez
@-webkit-keyframes flash {
        0%, 50%, 100% {opacity: 1;}
        25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
        0%, 50%, 100% {opacity: 1;}
        25%, 75% {opacity: 0;}
}
@-ms-keyframes flash {
        0%, 50%, 100% {opacity: 1;}
        25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
        0%, 50%, 100% {opacity: 1;}
        25%, 75% {opacity: 0;}
}
@keyframes flash {
        0%, 50%, 100% {opacity: 1;}
        25%, 75% {opacity: 0;}
}
.flash {
        -webkit-animation-name: flash 1s;
        -moz-animation-name: flash 1s;
        -ms-animation-name: flash 1s;
        -o-animation-name: flash 1s;
        animation-name: flash 1s;
}

Vous pouvez consulter la démonstration de l'animation « flash » pour avoir un aperçu du rendu dans un navigateur.

V. L'animation « shake »

Cette animation va créer un effet de tremblement en faisant bouger l'élément de gauche à droite.

 
Sélectionnez
@-webkit-keyframes shake {
        0%, 100% {-webkit-transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
        20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
        0%, 100% {-moz-transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
        20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-ms-keyframes shake {
        0%, 100% {-ms-transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
        20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}
@-o-keyframes shake {
        0%, 100% {-o-transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
        20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
        0%, 100% {transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
        20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
        -webkit-animation-name: shake;
        -moz-animation-name: shake;
        -ms-animation-name: shake;
        -o-animation-name: shake;
        animation-name: shake;
}

Vous pouvez consulter la démonstration de l'animation « shake » pour avoir un aperçu du rendu dans un navigateur.

VI. L'animation « bounce »

Cette animation fait rebondir votre élément HTML.

 
Sélectionnez
@-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-30px);}
        60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
        40% {-moz-transform: translateY(-30px);}
        60% {-moz-transform: translateY(-15px);}
}
@-ms-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
        40% {-ms-transform: translateY(-30px);}
        60% {-ms-transform: translateY(-15px);}
}
@-o-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
        40% {-o-transform: translateY(-30px);}
        60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-30px);}
        60% {transform: translateY(-15px);}
}
.bounce {
        -webkit-animation-name: bounce;
        -moz-animation-name: bounce;
        -ms-animation-name: bounce;
        -o-animation-name: bounce;
        animation-name: bounce;
}

Vous pouvez consulter la démonstration de l'animation « bounce » pour avoir un aperçu du rendu dans un navigateur.

VII. L'animation « swing »

Cette animation fait osciller votre élément de gauche à droite.

 
Sélectionnez
@-webkit-keyframes swing {
        20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
        20% { -webkit-transform: rotate(15deg); }
        40% { -webkit-transform: rotate(-10deg); }
        60% { -webkit-transform: rotate(5deg); }
        80% { -webkit-transform: rotate(-5deg); }
        100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
        20% { -moz-transform: rotate(15deg); }
        40% { -moz-transform: rotate(-10deg); }
        60% { -moz-transform: rotate(5deg); }
        80% { -moz-transform: rotate(-5deg); }
        100% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes swing {
        20% { -ms-transform: rotate(15deg); }
        40% { -ms-transform: rotate(-10deg); }
        60% { -ms-transform: rotate(5deg); }
        80% { -ms-transform: rotate(-5deg); }
        100% { -ms-transform: rotate(0deg); }
}
@-o-keyframes swing {
        20% { -o-transform: rotate(15deg); }
        40% { -o-transform: rotate(-10deg); }
        60% { -o-transform: rotate(5deg); }
        80% { -o-transform: rotate(-5deg); }
        100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
        20% { transform: rotate(15deg); }
        40% { transform: rotate(-10deg); }
        60% { transform: rotate(5deg); }
        80% { transform: rotate(-5deg); }
        100% { transform: rotate(0deg); }
}
.swing {
        -webkit-transform-origin: top center;
        -moz-transform-origin: top center;
        -ms-transform-origin: top center;
        -o-transform-origin: top center;
        transform-origin: top center;
        -webkit-animation-name: swing;
        -moz-animation-name: swing;
        -ms-animation-name: swing;
        -o-animation-name: swing;
        animation-name: swing;
}

Vous pouvez consulter la démonstration de l'animation « swing » pour avoir un aperçu du rendu dans un navigateur.

VIII. L'animation « wobble »

Cette animation fait remuer votre élément HTML.

 
Sélectionnez
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}
@-ms-keyframes wobble {
  0% { -ms-transform: translateX(0%); }
  15% { -ms-transform: translateX(-25%) rotate(-5deg); }
  30% { -ms-transform: translateX(20%) rotate(3deg); }
  45% { -ms-transform: translateX(-15%) rotate(-3deg); }
  60% { -ms-transform: translateX(10%) rotate(2deg); }
  75% { -ms-transform: translateX(-5%) rotate(-1deg); }
  100% { -ms-transform: translateX(0%); }
}
@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
.wobble {
        -webkit-animation-name: wobble;
        -moz-animation-name: wobble;
        -ms-animation-name: wobble;
        -o-animation-name: wobble;
        animation-name: wobble;
}

Vous pouvez consulter la démonstration de l'animation « wobble » pour avoir un aperçu du rendu dans un navigateur.

IX. L'animation « pulse »

Cette animation crée un effet de pulsation sur votre élément HTML.

 
Sélectionnez
@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
        50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
        50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulse {
    0% { -ms-transform: scale(1); }
        50% { -ms-transform: scale(1.1); }
    100% { -ms-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
        50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
        50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse {
        -webkit-animation-name: pulse;
        -moz-animation-name: pulse;
        -ms-animation-name: pulse;
        -o-animation-name: pulse;
        animation-name: pulse;
}

Vous pouvez consulter la démonstration de l'animation « pulse » pour avoir un aperçu du rendu dans un navigateur.

X. L'animation « flip »

Cette animation fait basculer votre élément HTML ; pour ce faire nous utilisons des transformations 3D qui ne sont pas compatibles avec les anciennes versions des navigateurs.

 
Sélectionnez
@-webkit-keyframes flip {
        0% {
                -webkit-transform: perspective(400px) rotateY(0);
                -webkit-animation-timing-function: ease-out;
        }
        40% {
                -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
                -webkit-animation-timing-function: ease-out;
        }
        50% {
                -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
                -webkit-animation-timing-function: ease-in;
        }
        80% {
                -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
                -webkit-animation-timing-function: ease-in;
        }
        100% {
                -webkit-transform: perspective(400px) scale(1);
                -webkit-animation-timing-function: ease-in;
        }
}
@-moz-keyframes flip {
        0% {
                -moz-transform: perspective(400px) rotateY(0);
                -moz-animation-timing-function: ease-out;
        }
        40% {
                -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
                -moz-animation-timing-function: ease-out;
        }
        50% {
                -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
                -moz-animation-timing-function: ease-in;
        }
        80% {
                -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
                -moz-animation-timing-function: ease-in;
        }
        100% {
                -moz-transform: perspective(400px) scale(1);
                -moz-animation-timing-function: ease-in;
        }
}
@-ms-keyframes flip {
        0% {
                -ms-transform: perspective(400px) rotateY(0);
                -ms-animation-timing-function: ease-out;
        }
        40% {
                -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg);
                -ms-animation-timing-function: ease-out;
        }
        50% {
                -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
                -ms-animation-timing-function: ease-in;
        }
        80% {
                -ms-transform: perspective(400px) rotateY(360deg) scale(.95);
                -ms-animation-timing-function: ease-in;
        }
        100% {
                -ms-transform: perspective(400px) scale(1);
                -ms-animation-timing-function: ease-in;
        }
}
@-o-keyframes flip {
        0% {
                -o-transform: perspective(400px) rotateY(0);
                -o-animation-timing-function: ease-out;
        }
        40% {
                -o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
                -o-animation-timing-function: ease-out;
        }
        50% {
                -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
                -o-animation-timing-function: ease-in;
        }
        80% {
                -o-transform: perspective(400px) rotateY(360deg) scale(.95);
                -o-animation-timing-function: ease-in;
        }
        100% {
                -o-transform: perspective(400px) scale(1);
                -o-animation-timing-function: ease-in;
        }
}
@keyframes flip {
        0% {
                transform: perspective(400px) rotateY(0);
                animation-timing-function: ease-out;
        }
        40% {
                transform: perspective(400px) translateZ(150px) rotateY(170deg);
                animation-timing-function: ease-out;
        }
        50% {
                transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
                animation-timing-function: ease-in;
        }
        80% {
                transform: perspective(400px) rotateY(360deg) scale(.95);
                animation-timing-function: ease-in;
        }
        100% {
                transform: perspective(400px) scale(1);
                animation-timing-function: ease-in;
        }
}
.flip {
        -webkit-backface-visibility: visible !important;
        -webkit-animation-name: flip;
        -moz-backface-visibility: visible !important;
        -moz-animation-name: flip;
        -ms-backface-visibility: visible !important;
        -ms-animation-name: flip;
        -o-backface-visibility: visible !important;
        -o-animation-name: flip;
        backface-visibility: visible !important;
        animation-name: flip;
}

Vous pouvez consulter la démonstration de l'animation « flip » pour avoir un aperçu du rendu dans un navigateur.

XI. L'animation « fade in down »

Cette animation fait apparaître votre élément HTML en fondu vers le bas.

 
Sélectionnez
@-webkit-keyframes fadeInDown {
        0% {
                opacity: 0;
                -webkit-transform: translateY(-20px);
        }
        100% {
                opacity: 1;
                -webkit-transform: translateY(0);
        }
}
@-moz-keyframes fadeInDown {
        0% {
                opacity: 0;
                -moz-transform: translateY(-20px);
        }
        100% {
                opacity: 1;
                -moz-transform: translateY(0);
        }
}
@-ms-keyframes fadeInDown {
        0% {
                opacity: 0;
                -ms-transform: translateY(-20px);
        }
        100% {
                opacity: 1;
                -ms-transform: translateY(0);
        }
}
@-o-keyframes fadeInDown {
        0% {
                opacity: 0;
                -ms-transform: translateY(-20px);
        }
        100% {
                opacity: 1;
                -ms-transform: translateY(0);
        }
}
@keyframes fadeInDown {
        0% {
                opacity: 0;
                transform: translateY(-20px);
        }
        100% {
                opacity: 1;
                transform: translateY(0);
        }
}
.fadeInDown {
        -webkit-animation-name: fadeInDown;
        -moz-animation-name: fadeInDown;
        -ms-animation-name: fadeInDown;
        -o-animation-name: fadeInDown;
        animation-name: fadeInDown;
}

Vous pouvez consulter la démonstration de l'animation « fade in down » pour avoir un aperçu du rendu dans un navigateur.

XII. L'animation « fade in left »

Cette animation fait apparaître votre élément HTML en fondu vers la gauche.

 
Sélectionnez
@-webkit-keyframes fadeInLeft {
        0% {
                opacity: 0;
                -webkit-transform: translateX(-20px);
        }
        100% {
                opacity: 1;
                -webkit-transform: translateX(0);
        }
}
@-moz-keyframes fadeInLeft {
        0% {
                opacity: 0;
                -moz-transform: translateX(-20px);
        }
        100% {
                opacity: 1;
                -moz-transform: translateX(0);
        }
}
@-ms-keyframes fadeInLeft {
        0% {
                opacity: 0;
                -ms-transform: translateX(-20px);
        }
        100% {
                opacity: 1;
                -ms-transform: translateX(0);
        }
}
@-o-keyframes fadeInLeft {
        0% {
                opacity: 0;
                -o-transform: translateX(-20px);
        }
        100% {
                opacity: 1;
                -o-transform: translateX(0);
        }
}
@keyframes fadeInLeft {
        0% {
                opacity: 0;
                transform: translateX(-20px);
        }
        100% {
                opacity: 1;
                transform: translateX(0);
        }
}
.fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        -moz-animation-name: fadeInLeft;
        -ms-animation-name: fadeInLeft;
        -o-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
}

Vous pouvez consulter la démonstration de l'animation « fade in left » pour avoir un aperçu du rendu dans un navigateur.

XIII. L'animation « fade in down big »

Cette animation est similaire à l'animation « fade in down » à ceci près qu'elle fait apparaître votre élément depuis le haut de la page.

 
Sélectionnez
@-webkit-keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -webkit-transform: translateY(-2000px);
        }
        100% {
                opacity: 1;
                -webkit-transform: translateY(0);
        }
}
@-moz-keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -moz-transform: translateY(-2000px);
        }
        100% {
                opacity: 1;
                -moz-transform: translateY(0);
        }
}
@-ms-keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -ms-transform: translateY(-2000px);
        }
        100% {
                opacity: 1;
                -ms-transform: translateY(0);
        }
}
@-o-keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -o-transform: translateY(-2000px);
        }
        100% {
                opacity: 1;
                -o-transform: translateY(0);
        }
}
@keyframes fadeInDownBig {
        0% {
                opacity: 0;
                transform: translateY(-2000px);
        }
        100% {
                opacity: 1;
                transform: translateY(0);
        }
}
.fadeInDownBig {
        -webkit-animation-name: fadeInDownBig;
        -moz-animation-name: fadeInDownBig;
        -ms-animation-name: fadeInDownBig;
        -o-animation-name: fadeInDownBig;
        animation-name: fadeInDownBig;
}

Vous pouvez consulter la démonstration de l'animation « fade in down big » pour avoir un aperçu du rendu dans un navigateur.

XIV. L'animation « fade in left big »

Cette animation fait apparaître votre élément HTML en fondu de la gauche de la page vers le centre.

 
Sélectionnez
@-webkit-keyframes fadeInLeftBig {
        0% {
                opacity: 0;
                -webkit-transform: translateX(-2000px);
        }
        100% {
                opacity: 1;
                -webkit-transform: translateX(0);
        }
}
@-moz-keyframes fadeInLeftBig {
        0% {
                opacity: 0;
                -moz-transform: translateX(-2000px);
        }
        100% {
                opacity: 1;
                -moz-transform: translateX(0);
        }
}
@-ms-keyframes fadeInLeftBig {
        0% {
                opacity: 0;
                -ms-transform: translateX(-2000px);
        }
        100% {
                opacity: 1;
                -ms-transform: translateX(0);
        }
}
@-o-keyframes fadeInLeftBig {
        0% {
                opacity: 0;
                -o-transform: translateX(-2000px);
        }
        100% {
                opacity: 1;
                -o-transform: translateX(0);
        }
}
@keyframes fadeInLeftBig {
        0% {
                opacity: 0;
                transform: translateX(-2000px);
        }
        100% {
                opacity: 1;
                transform: translateX(0);
        }
}
.fadeInLeftBig {
        -webkit-animation-name: fadeInLeftBig;
        -moz-animation-name: fadeInLeftBig;
        -ms-animation-name: fadeInLeftBig;
        -o-animation-name: fadeInLeftBig;
        animation-name: fadeInLeftBig;
}

Vous pouvez consulter la démonstration de l'animation « fade in left big » pour avoir un aperçu du rendu dans un navigateur.

XV. L'animation « fade out »

Cette animation fait disparaître votre élément HTML en fondu.

 
Sélectionnez
@-webkit-keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
}
@-moz-keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
}
@-ms-keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
}
@-o-keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
}
@keyframes fadeOut {
        0% {opacity: 1;}
        100% {opacity: 0;}
}
.fadeOut {
        -webkit-animation-name: fadeOut;
        -moz-animation-name: fadeOut;
        -ms-animation-name: fadeOut;
        -o-animation-name: fadeOut;
        animation-name: fadeOut;
}

Vous pouvez consulter la démonstration de l'animation « fade out » pour avoir un aperçu du rendu dans un navigateur.

XVI. L'animation « fade out down big »

Cette animation fait disparaître votre élément en fondu vers le bas de la page.

 
Sélectionnez
@-webkit-keyframes fadeOutDownBig {
        0% {
                opacity: 1;
                -webkit-transform: translateY(0);
        }
        100% {
                opacity: 0;
                -webkit-transform: translateY(2000px);
        }
}
@-moz-keyframes fadeOutDownBig {
        0% {
                opacity: 1;
                -moz-transform: translateY(0);
        }
        100% {
                opacity: 0;
                -moz-transform: translateY(2000px);
        }
}
@-ms-keyframes fadeOutDownBig {
        0% {
                opacity: 1;
                -ms-transform: translateY(0);
        }
        100% {
                opacity: 0;
                -ms-transform: translateY(2000px);
        }
}
@-o-keyframes fadeOutDownBig {
        0% {
                opacity: 1;
                -o-transform: translateY(0);
        }
        100% {
                opacity: 0;
                -o-transform: translateY(2000px);
        }
}
@keyframes fadeOutDownBig {
        0% {
                opacity: 1;
                transform: translateY(0);
        }
        100% {
                opacity: 0;
                transform: translateY(2000px);
        }
}
.fadeOutDownBig {
        -webkit-animation-name: fadeOutDownBig;
        -moz-animation-name: fadeOutDownBig;
        -ms-animation-name: fadeOutDownBig;
        -o-animation-name: fadeOutDownBig;
        animation-name: fadeOutDownBig;
}

Vous pouvez consulter la démonstration de l'animation « fade out down big » pour avoir un aperçu du rendu dans un navigateur.

XVII. L'animation « fade out right big »

Cette animation est similaire à la précédente à ceci près que l'élément disparaît vers la droite de la page.

 
Sélectionnez
@-webkit-keyframes fadeOutRightBig {
        0% {
                opacity: 1;
                -webkit-transform: translateX(0);
        }
        100% {
                opacity: 0;
                -webkit-transform: translateX(2000px);
        }
}
@-moz-keyframes fadeOutRightBig {
        0% {
                opacity: 1;
                -moz-transform: translateX(0);
        }
        100% {
                opacity: 0;
                -moz-transform: translateX(2000px);
        }
}
@-ms-keyframes fadeOutRightBig {
        0% {
                opacity: 1;
                -ms-transform: translateX(0);
        }
        100% {
                opacity: 0;
                -ms-transform: translateX(2000px);
        }
}
@-o-keyframes fadeOutRightBig {
        0% {
                opacity: 1;
                -o-transform: translateX(0);
        }
        100% {
                opacity: 0;
                -o-transform: translateX(2000px);
        }
}
@keyframes fadeOutRightBig {
        0% {
                opacity: 1;
                transform: translateX(0);
        }
        100% {
                opacity: 0;
                transform: translateX(2000px);
        }
}
.fadeOutRightBig {
        -webkit-animation-name: fadeOutRightBig;
        -moz-animation-name: fadeOutRightBig;
        -ms-animation-name: fadeOutRightBig;
        -o-animation-name: fadeOutRightBig;
        animation-name: fadeOutRightBig;
}

Vous pouvez consulter la démonstration de l'animation « fade out right big » pour avoir un aperçu du rendu dans un navigateur.

XVIII. L'animation « bounce in »

Cette animation fait apparaître votre élément HTML avec un rebond.

 
Sélectionnez
@-webkit-keyframes bounceIn {
        0% {
                opacity: 0;
                -webkit-transform: scale(.3);
        }
        50% {
                opacity: 1;
                -webkit-transform: scale(1.05);
        }
        70% {
                -webkit-transform: scale(.9);
        }
        100% {
                -webkit-transform: scale(1);
        }
}
@-moz-keyframes bounceIn {
        0% {
                opacity: 0;
                -moz-transform: scale(.3);
        }
        50% {
                opacity: 1;
                -moz-transform: scale(1.05);
        }
        70% {
                -moz-transform: scale(.9);
        }
        100% {
                -moz-transform: scale(1);
        }
}
@-ms-keyframes bounceIn {
        0% {
                opacity: 0;
                -ms-transform: scale(.3);
        }
        50% {
                opacity: 1;
                -ms-transform: scale(1.05);
        }
        70% {
                -ms-transform: scale(.9);
        }
        100% {
                -ms-transform: scale(1);
        }
}
@-o-keyframes bounceIn {
        0% {
                opacity: 0;
                -o-transform: scale(.3);
        }
        50% {
                opacity: 1;
                -o-transform: scale(1.05);
        }
        70% {
                -o-transform: scale(.9);
        }
        100% {
                -o-transform: scale(1);
        }
}
@keyframes bounceIn {
        0% {
                opacity: 0;
                transform: scale(.3);
        }
        50% {
                opacity: 1;
                transform: scale(1.05);
        }
        70% {
                transform: scale(.9);
        }
        100% {
                transform: scale(1);
        }
}
.bounceIn {
        -webkit-animation-name: bounceIn;
        -moz-animation-name: bounceIn;
        -ms-animation-name: bounceIn;
        -o-animation-name: bounceIn;
        animation-name: bounceIn;
}

Vous pouvez consulter la démonstration de l'animation « bounce in » pour avoir un aperçu du rendu dans un navigateur.

XIX. L'animation « bounce in right »

Cette animation est similaire à la précédente à ceci près qu'elle fait rebondir l'élément depuis la droite de la page.

 
Sélectionnez
@-webkit-keyframes bounceInRight {
        0% {
                opacity: 0;
                -webkit-transform: translateX(2000px);
        }
        60% {
                opacity: 1;
                -webkit-transform: translateX(-30px);
        }
        80% {
                -webkit-transform: translateX(10px);
        }
        100% {
                -webkit-transform: translateX(0);
        }
}
@-moz-keyframes bounceInRight {
        0% {
                opacity: 0;
                -moz-transform: translateX(2000px);
        }
        60% {
                opacity: 1;
                -moz-transform: translateX(-30px);
        }
        80% {
                -moz-transform: translateX(10px);
        }
        100% {
                -moz-transform: translateX(0);
        }
}
@-ms-keyframes bounceInRight {
        0% {
                opacity: 0;
                -ms-transform: translateX(2000px);
        }
        60% {
                opacity: 1;
                -ms-transform: translateX(-30px);
        }
        80% {
                -ms-transform: translateX(10px);
        }
        100% {
                -ms-transform: translateX(0);
        }
}
@-o-keyframes bounceInRight {
        0% {
                opacity: 0;
                -o-transform: translateX(2000px);
        }
        60% {
                opacity: 1;
                -o-transform: translateX(-30px);
        }
        80% {
                -o-transform: translateX(10px);
        }
        100% {
                -o-transform: translateX(0);
        }
}
@keyframes bounceInRight {
        0% {
                opacity: 0;
                transform: translateX(2000px);
        }
        60% {
                opacity: 1;
                transform: translateX(-30px);
        }
        80% {
                transform: translateX(10px);
        }
        100% {
                transform: translateX(0);
        }
}
.bounceInRight {
        -webkit-animation-name: bounceInRight;
        -moz-animation-name: bounceInRight;
        -ms-animation-name: bounceInRight;
        -o-animation-name: bounceInRight;
        animation-name: bounceInRight;
}

Vous pouvez consulter la démonstration de l'animation « bounce in right » pour avoir un aperçu du rendu dans un navigateur.

XX. L'animation « bounce out »

Cette animation fait disparaître votre élément de l'écran en le faisant rebondir.

 
Sélectionnez
@-webkit-keyframes bounceOut {
        0% {
                -webkit-transform: scale(1);
        }
        25% {
                -webkit-transform: scale(.95);
        }
        50% {
                opacity: 1;
                -webkit-transform: scale(1.1);
        }
        100% {
                opacity: 0;
                -webkit-transform: scale(.3);
        }
}
@-moz-keyframes bounceOut {
        0% {
                -moz-transform: scale(1);
        }
        25% {
                -moz-transform: scale(.95);
        }
        50% {
                opacity: 1;
                -moz-transform: scale(1.1);
        }
        100% {
                opacity: 0;
                -moz-transform: scale(.3);
        }
}
@-ms-keyframes bounceOut {
        0% {
                -ms-transform: scale(1);
        }
        25% {
                -ms-transform: scale(.95);
        }
        50% {
                opacity: 1;
                -ms-transform: scale(1.1);
        }
        100% {
                opacity: 0;
                -ms-transform: scale(.3);
        }
}
@-o-keyframes bounceOut {
        0% {
                -o-transform: scale(1);
        }
        25% {
                -o-transform: scale(.95);
        }
        50% {
                opacity: 1;
                -o-transform: scale(1.1);
        }
        100% {
                opacity: 0;
                -o-transform: scale(.3);
        }
}
@keyframes bounceOut {
        0% {
                transform: scale(1);
        }
        25% {
                transform: scale(.95);
        }
        50% {
                opacity: 1;
                transform: scale(1.1);
        }
        100% {
                opacity: 0;
                transform: scale(.3);
        }
}
.bounceOut {
        -webkit-animation-name: bounceOut;
        -moz-animation-name: bounceOut;
        -ms-animation-name: bounceOut;
        -o-animation-name: bounceOut;
        animation-name: bounceOut;
}

Vous pouvez consulter la démonstration de l'animation « bounce out » pour avoir un aperçu du rendu dans un navigateur.

XXI. L'animation « bounce out down »

Cette animation est similaire à l'animation « bounce out » à ceci près qu'elle fait disparaître votre élément vers le bas de la page.

 
Sélectionnez
@-webkit-keyframes bounceOutDown {
        0% {
                -webkit-transform: translateY(0);
        }
        20% {
                opacity: 1;
                -webkit-transform: translateY(-20px);
        }
        100% {
                opacity: 0;
                -webkit-transform: translateY(2000px);
        }
}
@-moz-keyframes bounceOutDown {
        0% {
                -moz-transform: translateY(0);
        }
        20% {
                opacity: 1;
                -moz-transform: translateY(-20px);
        }
        100% {
                opacity: 0;
                -moz-transform: translateY(2000px);
        }
}
@-ms-keyframes bounceOutDown {
        0% {
                -ms-transform: translateY(0);
        }
        20% {
                opacity: 1;
                -ms-transform: translateY(-20px);
        }
        100% {
                opacity: 0;
                -ms-transform: translateY(2000px);
        }
}
@keyframes bounceOutDown {
        0% {
                transform: translateY(0);
        }
        20% {
                opacity: 1;
                transform: translateY(-20px);
        }
        100% {
                opacity: 0;
                transform: translateY(2000px);
        }
}
.bounceOutDown {
        -webkit-animation-name: bounceOutDown;
        -moz-animation-name: bounceOutDown;
        -ms-animation-name: bounceOutDown;
        animation-name: bounceOutDown;
}

Vous pouvez consulter la démonstration de l'animation « bounce out down » pour avoir un aperçu du rendu dans un navigateur.

XXII. L'animation « rotate in down left »

Cette animation fait apparaître votre élément HTML en tournant de la gauche vers la droite en partant du haut.

 
Sélectionnez
@-webkit-keyframes rotateInDownLeft {
        0% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(-90deg);
                opacity: 0;
        }
        100% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(0);
                opacity: 1;
        }
}
@-moz-keyframes rotateInDownLeft {
        0% {
                -moz-transform-origin: left bottom;
                -moz-transform: rotate(-90deg);
                opacity: 0;
        }
        100% {
                -moz-transform-origin: left bottom;
                -moz-transform: rotate(0);
                opacity: 1;
        }
}
@-ms-keyframes rotateInDownLeft {
        0% {
                -ms-transform-origin: left bottom;
                -ms-transform: rotate(-90deg);
                opacity: 0;
        }
        100% {
                -ms-transform-origin: left bottom;
                -ms-transform: rotate(0);
                opacity: 1;
        }
}
@-o-keyframes rotateInDownLeft {
        0% {
                -o-transform-origin: left bottom;
                -o-transform: rotate(-90deg);
                opacity: 0;
        }
        100% {
                -o-transform-origin: left bottom;
                -o-transform: rotate(0);
                opacity: 1;
        }
}
@keyframes rotateInDownLeft {
        0% {
                transform-origin: left bottom;
                transform: rotate(-90deg);
                opacity: 0;
        }
        100% {
                transform-origin: left bottom;
                transform: rotate(0);
                opacity: 1;
        }
}
.rotateInDownLeft {
        -webkit-animation-name: rotateInDownLeft;
        -moz-animation-name: rotateInDownLeft;
        -ms-animation-name: rotateInDownLeft;
        -o-animation-name: rotateInDownLeft;
        animation-name: rotateInDownLeft;
 
}

Vous pouvez consulter la démonstration de l'animation « rotate in down left » pour avoir un aperçu du rendu dans un navigateur.

XXIII. L'animation « rotate in up left »

Cette animation est similaire à la précédente à ceci près que la rotation va de bas en haut.

 
Sélectionnez
@-webkit-keyframes rotateInUpLeft {
        0% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(90deg);
                opacity: 0;
        }
        100% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(0);
                opacity: 1;
        }
}
@-moz-keyframes rotateInUpLeft {
        0% {
                -moz-transform-origin: left bottom;
                -moz-transform: rotate(90deg);
                opacity: 0;
        }
        100% {
                -moz-transform-origin: left bottom;
                -moz-transform: rotate(0);
                opacity: 1;
        }
}
@-ms-keyframes rotateInUpLeft {
        0% {
                -ms-transform-origin: left bottom;
                -ms-transform: rotate(90deg);
                opacity: 0;
        }
        100% {
                -ms-transform-origin: left bottom;
                -ms-transform: rotate(0);
                opacity: 1;
        }
}
@-o-keyframes rotateInUpLeft {
        0% {
                -o-transform-origin: left bottom;
                -o-transform: rotate(90deg);
                opacity: 0;
        }
        100% {
                -o-transform-origin: left bottom;
                -o-transform: rotate(0);
                opacity: 1;
        }
}
@keyframes rotateInUpLeft {
        0% {
                transform-origin: left bottom;
                transform: rotate(90deg);
                opacity: 0;
        }
        100% {
                transform-origin: left bottom;
                transform: rotate(0);
                opacity: 1;
        }
}
.rotateInUpLeft {
        -webkit-animation-name: rotateInUpLeft;
        -moz-animation-name: rotateInUpLeft;
        -ms-animation-name: rotateInUpLeft;
        -o-animation-name: rotateInUpLeft;
        animation-name: rotateInUpLeft;
}

Vous pouvez consulter la démonstration de l'animation « rotate in up left » pour avoir un aperçu du rendu dans un navigateur.

XXIV. L'animation « hinge »

Cette animation fait disparaître votre élément HTML en le faisant tomber vers le bas de la page.

 
Sélectionnez
@-webkit-keyframes hinge {
        0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
        20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
        40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
        80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
        100% { -webkit-transform: translateY(700px); opacity: 0; }
}
@-moz-keyframes hinge {
        0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
        20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
        40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
        80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
        100% { -moz-transform: translateY(700px); opacity: 0; }
}
@-ms-keyframes hinge {
        0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
        20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
        40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
        80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
        100% { -ms-transform: translateY(700px); opacity: 0; }
}
@-o-keyframes hinge {
        0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
        20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
        40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
        80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
        100% { -o-transform: translateY(700px); opacity: 0; }
}
@keyframes hinge {
        0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
        20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
        40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
        80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
        100% { transform: translateY(700px); opacity: 0; }
}
.hinge {
        -webkit-animation-name: hinge;
        -moz-animation-name: hinge;
        -ms-animation-name: hinge;
        -o-animation-name: hinge;
        animation-name: hinge;
}

Vous pouvez consulter la démonstration de l'animation « hinge » pour avoir un aperçu du rendu dans un navigateur.

XXV. L'animation « roll in »

Cette animation fait apparaître votre élément HTML en le faisant rouler.

 
Sélectionnez
@-webkit-keyframes rollIn {
        0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
        100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
        0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
        100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-ms-keyframes rollIn {
        0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
        100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollIn {
        0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
        100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
        0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
        100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn {
        -webkit-animation-name: rollIn;
        -moz-animation-name: rollIn;
        -ms-animation-name: rollIn;
        -o-animation-name: rollIn;
        animation-name: rollIn;
}

Vous pouvez consulter la démonstration de l'animation « roll in » pour avoir un aperçu du rendu dans un navigateur.

XXVI. L'animation « roll out »

Cette animation fait disparaître votre élément HTML en le faisant rouler.

 
Sélectionnez
@-webkit-keyframes rollOut {
    0% {
                opacity: 1;
                -webkit-transform: translateX(0px) rotate(0deg);
        }
    100% {
                opacity: 0;
                -webkit-transform: translateX(100%) rotate(120deg);
        }
}
@-moz-keyframes rollOut {
    0% {
                opacity: 1;
                -moz-transform: translateX(0px) rotate(0deg);
        }
    100% {
                opacity: 0;
                -moz-transform: translateX(100%) rotate(120deg);
        }
}
@-ms-keyframes rollOut {
    0% {
                opacity: 1;
                -ms-transform: translateX(0px) rotate(0deg);
        }
    100% {
                opacity: 0;
                -ms-transform: translateX(100%) rotate(120deg);
        }
}
@-o-keyframes rollOut {
    0% {
                opacity: 1;
                -o-transform: translateX(0px) rotate(0deg);
        }
    100% {
                opacity: 0;
                -o-transform: translateX(100%) rotate(120deg);
        }
}
@keyframes rollOut {
    0% {
                opacity: 1;
                transform: translateX(0px) rotate(0deg);
        }
    100% {
                opacity: 0;
                transform: translateX(100%) rotate(120deg);
        }
}
.rollOut {
        -webkit-animation-name: rollOut;
        -moz-animation-name: rollOut;
        -ms-animation-name: rollOut;
        -o-animation-name: rollOut;
        animation-name: rollOut;
}

Vous pouvez consulter la démonstration de l'animation « roll out » pour avoir un aperçu du rendu dans un navigateur.

XXVII. Télécharger Animate.css

Vous pouvez télécharger le projet sur GitHub ne serait-ce que pour regarder le code source et apprendre tout ce qu'il est possible de faire avec les animations CSS.

Vous pouvez le récupérer dès maintenant : Animate.css.

XXVIII. Remerciements

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.