Les animations CSS

css3-webdesign-lien-web

Les animations CSS sont très utilisées. Elles permettent de porter l'attention de l'utilisateur vers un endroit en particulier de votre interface.

Elles sont, de ce fait, des transitions et permettent de passer un objet par un état A puis un état B puis un C et cela autant de fois que vous le souhaitez et comme vous le voulez (position, vitesse etc.).

Par exemple, vous pouvez déplacer un carré, changer sa couleur, sa taille etc. Dans cet article, nous allons voir comment créer de simples animations avec des keyframes puis nous verrons en détails des animations plus complexes.

Les bases :

Définir l'animation

Pour créer une animation CSS il vous faudra tout d'abord utiliser la balise @keyframe qui permet de définir les étapes et les styles de votre animation.

 

@keyframes monAnimation {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        transform: translateY(200px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(200px) rotate(60deg);
        opacity: 1;
    }
}

Le code ci-dessus sert à définir une animation appelée "monAnimation" que l'on pourra utiliser ensuite où l'on veut.
Ensuite, nous définissons les étapes de l'animation, chacune des étapes est réprésentée par un pourcentage : 0% est le début de l'animation, 50% la moitié et 100% la fin. Il est possible de créer autant d'étapes que l'on souhaite.
Enfin, à l'intérieur des pourcentages, nous utilisons la propriété CSS que l'on veut.

Dans cet exemple, on définit les étapes de l'animation, ici à 50% (la moitié), l'élément bougera en hauteur de 200 pixels et à 100% (à la fin) il aura encore bougé de 200pixels et en plus il effectuera une rotation de 60 degrès.

A noter qu'il est possible de remplacer le 0% par la valeur "from" et le 100% par la valeur "to".

Appliquer l'animation

 

.bloc {
    width: 200px;
    height: 200px;
    background: red;
}

.bloc:hover {
    animation-name: monAnimation;
    animation-duration: 2s;
}

L'animation est effectuée sur les sélecteurs CSS et / ou éléments que vous voulez animer. Vous devez impérativement définir le nom de l'animation et sa durée pour que celle-ci fonctionne : grâce à ce code, on appelle sur un bloc au hover notre animation qui s'effectuera en 2 secondes.

Vous pouvez combiner l'animation de cette façon :

.bloc:hover {
    animation: monAnimation 2s;
}

Compatibilité navigateurs

Les navigateurs Chrome, Safari et Opéra ont besoin du préfixe -webkit pour que l'animation soit prise en compte. Il nous faudra donc inclure deux versions de notre code (une préfixée et l'autre normale) pour que celui-ci soit compatible multi navigateurs.

Voici ce que cela donnera en situation réelle :

@-webkit-keyframes monAnimation {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        transform: translateY(200px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(200px) rotate(60deg);
        opacity: 1;
    }
} 
@keyframes monAnimation {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        transform: translateY(200px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(200px) rotate(60deg);
        opacity: 1;
    }
}

.bloc {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: monAnimation;
    animation-name: monAnimation;
}

Bien-sûr il est tout à fait possible d'utiliser un auto-prefixer dans votre build Gulp ou Grunt ou encore d'utiliser autoprefixer avec des outils comme Prepros.

Pour en savoir plus sur les auto-prefixer, c'est ici que ça se passe : Autoprefixer

Les propriétés CSS des animations :

Il est possible de faire des animations CSS plus poussées à l'aide des propriétés que voici : 

  • animation-delay : permet de définir un délai avant le démarrage de l'animation, par exemple 5s, 200ms ...

  • animation-timing-function : permet de définir l'accélération de l'animation. Voici les options prédéfinies : ease, linear, ease-in, ease-out, ease-in-out, initial, inherit.

  • animation-iteration-count : il s'agit du nombre de répétitions de l’animation. Les valeurs possibles sont les suivantes : infinite (l'animation sera jouée en continu), initial (par défaut) et inherit (prend la valeur de son parent).

  • animation-direction : permet de spécifier si l'animation doit être jouée à l'endroit (normal), à l'envers (reverse) ou dans les deux sens (alternate). Elle peut même être jouée à l'envers dans les deux sens (alternate-reverse)

  • animation-fill-mode  : permet d'indiquer comment l'objet doit s'afficher avant et après l'animation. Elle prend les propriétés suivantes : backwards (avant l'animation), forwards (après que l'animation soit finie) et both (l'animation prend les règles de backwards et forwards)

  • animation-play-state : permet de spécifier si l'animation est en train d'être jouée ou si elle est en pause. Les propriétés disponibles sont les suivantes : playing (en cours) ou paused (en pause).

 

Avec ces différents styles d'animations, les possibilités sont infinies et ne dépendent que de votre imagination. Vous pouvez tester toutes sortes d'animations sur Animate.css qui est une bibliothèque d'animations.

Voici quelques animations css 3 très utiles et simples à faire pour les sites web : http://codepen.io/puzzleland/pen/gwEzyW

Et si vous voulez en savoir plus sur les animations CSS, c'est ici que ça se passe : http://www.w3schools.com/css/css3_animations.asp

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.