Login

Bienvenue sur le site de Jef

Les bases du CSS

Les animations

Cette étude a été traduite d'un site anglais et compilé avec plusieurs tutoriels Français

Introduction

CSS3
Animation

Les Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps, tel un scénario Flash. C’est en fait plusieurs transitions qui s’enchainent !

Les animations consistent en deux composants, un style décrivant l'animation CSS et un ensemble de keyframes qui indique le début et les états finaux du style de l'animation, aussi bien que des points de cheminement intermédiaires possibles en chemin.

Comment déclarer l'animation?

Pour créer des animations dans CSS3, vous devrez utiliser la règle de @keyframes.
C'est la règle @keyframes qui crée l'animation.
Il faut spécifier un style CSS à l'intérieur de la règle de @keyframes et l'animation changera progressivement du style actuel au nouveau style.

Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100%.

Exemple: 
@keyframes monanim   
{ 
from { color:blue; } 
to { color:red; } 
}

Comme pour la transition et d'autres propriétés telles que border-radius ou box-shadow, ils existent des préfixes pour les différents navigateurs, et il faudra donc coder pour chaque @keyframes:

  1. pour les navigateurs Safari et Chrome:
    @-webkit-keyframes nomdelanimation { }
  2. Pour les dernières versions 100% de IE, FireFox et Opera, simplement:
    @keyframes nomdelanimation { }

Toutefois, Internet Explorer 10, Firefox, and Opera supportent la règle @keyframes et les propriétés d'animation.
Chrome et Safari requièrent le prefix -webkit-.

Internet Explorer 9, et les précédentes versions ne supportent pas la règle @keyframe et les propriétés d'animation.

Configuration de l'animation

Voici les propriétés qui définissent l'animation:

  1. animation-name : le nom de l’animation à utiliser
  2. animation-duration : le temps total de l’animation
  3. animation-timing-function : la méthode d’interpolation (accélération, décélération).
    Voici quelques valeurs possibles :
    - linear
    - ease
    - ease-in
    - ease-out
    - ease-in-out
    - steps (nombre, start | end)
    - cubic-bezier( p1, p2, p3, p4)
  4. animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite permet de jouer une animation en continu
  5. animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
    Les valeurs sont:
    - normal : valeur par défaut. L'animation sera jouée normalement.
    - reverse : L'animation sera jouée een sens inverse.
    - alternate :L'animation sera jouée normalement à chaque temps impair (1,3,5,etc.) et en sens inverse tous les temps pairs (2,4,6,etc.)
    - alternate_reverse :L'animation sera jouée en sens inverse à chaque temps impair (1,3,5,etc.) et dans le sens normal tous les temps pairs (2,4,6,etc.)
    - initial : mets la propriété à sa valeur par défaut.
  6. animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C
  7. animation-delay : le temps avant que l’animation ne démarre
  8. animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci

Ma première animation

Code CSS 
div.carre  
{ 
 width:100px; height:100px;
 background:red;
 animation-name: myfirst;
 animation-duration: 1s;
 animation-iteration-count:infinite;
 animation-direction:alternate;
/* le raccourci est:  animation:myfirst 5s infinite alternate; */
/* pour Safari and Chrome */
 -webkit-animation:myfirst 5s infinite alternate;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
/* pour Safari and Chrome */
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
Code html: 
<div class="carre"></div>
Résultat:

Animation d'un texte

.animtext { color:red !important;
            animation-duration: 2s;
            animation-name: animjef;
            animation-iteration-count:infinite;
            animation-direction:alternate-reverse; }
@keyframes animjef {
  from { margin-left: 30%; width: 100%; }
  50%  { margin-left: 0%;  width: 40%; }
  to   { margin-left: 0%;  width: 100%; }
}

Ceci est mon texte animé

Animation au survol de la souris

Bien sûr, le changement de couleur est un bon exemple, mais que faut-il faire pour faire bouger l'animation?
Voici un exemple au survol de la souris.

Code CSS: 
.doigt a 
{
padding: 10px 10px 10px 77px;
background: rgba(255,140,0,0.4) url(/old/debutcss/images/animation/main.gif) no-repeat 5px 10px;
border: 1px solid #FF8C00;
border-radius: 5px;
}
p.doigt a:hover, p.doigt a:focus {
color: black;
animation-name: doigt; 
animation-duration: 4s; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 
}
/* en raccourci: animation: doigt 4s infinite linear; */
@keyframes doigt {
0% {background:rgba(255,140,0,0.4) url(/old/debutcss/images/animation/main.gif) no-repeat 5px 10px;}
50% {background:rgba(255,140,0,1) url(/old/debutcss/images/animation/main.gif) no-repeat 50px 10px;}
100% {background:rgba(255,140,0,0.4) url(/old/debutcss/images/animation/main.gif) no-repeat 5px 10px;}
}
Code html: 
<p class="doigt"><a href="#">On ne montre pas du doigt !</a></p>
Résultat:

On ne montre pas du doigt !

Animation d'un carré

Code CSS: 
div.carre  { width:100px; height:100px;
             position:relative; 
             background:red;
             animation:anim 5s infinite alternate;
             -webkit-animation:anim 5s infinite alternate; }
@keyframes anim 
{
0%   {background:red; left:0px; top:0px; }
25%  {background:yellow; left:200px; top:0px; }
50%  {background:blue; left:400px; top:0px; }
100% {background:green; left:600px; top:0px; }
}
@-webkit-keyframes anim 
{
0%   {background:red; left:0px; top:0px; }
25%  {background:yellow; left:200px; top:0px; }
50%  {background:blue; left:400px; top:0px; }
100% {background:green; left:600px; top:0px; }
}
Code html: 
<div class="carre"></div>
Résultat:

Jeux de boule

N'oubliez pas de définir un style pour Safari et Chrome avec -webkit-animation et @-webkit-keyframes de même pour -webkit-border-radius

Code CSS: 
div.boule { position:relative; width:50px; height:50px;
            border-radius:25px;
            background:red;       
            animation-name:maboule;
            animation-duration:1.5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running; }
@keyframes maboule
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:150px; top:0px;}
50%  {background:blue; left:150px; top:50px;}
75%  {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}
Code html: 
<div class="boule"></div>
Résultat:

Rebondissement d'une balle

Voici maintenant une animation intéressante: le rebondissement d'une balle.

N'oubliez pas de définir un style pour Safari et Chrome avec -webkit-animation et @-webkit-keyframes de même pour -webkit-border-radius

Code CSS: 
.container   { position: relative; width: 200px; height: 200px; }
.ball        { position: absolute; width: 20px; height: 20px; 
               border-radius: 50%;
               background-color: red; }
               
.container:hover .ball  {  
-webkit-animation: 2s linear 0s normal none 15 rebond;
animation: 2s linear 0s normal none 15 rebond; }@keyframes rebond
}
  
@keyframes rebond 
{
 10%, 40%, 60%, 80%, 90% { animation-timing-function: ease-out; bottom: 0; }
 0%          { animation-timing-function: ease-in; bottom: 200px; left: 0; }
 30%         { animation-timing-function: ease-in; bottom: 150px; }
 50%         { animation-timing-function: ease-in; bottom: 100px; }
 70%         { animation-timing-function: ease-in; bottom: 50px; }
 85%         { animation-timing-function: ease-in; bottom: 20px; }
 95%         { animation-timing-function: ease-in; bottom: 10px; }
 100%        { animation-timing-function: ease-out; left: 180px; bottom: 0; }
}
Code html: 
<div class="container">
    <div class="ball"></div>
</div>
Résultat:

Placer le curseur dedans!

Défilements sur un texte

Défilement linéaire, infini et alterné

Pour le premier exemple, nous allons utiliser infinite et alternate

Code CSS: 
.defil    { position: relative; width: 400px; height: 20px;    
            margin: 10px; overflow: hidden; text-align: center;
            border: 1px solid #ddd;
            border-radius: 5px; }

.defil div.ligne { position: absolute; top: 0; left: 0;
                   width: 20px; height: 20px;
                   background-color: rgba(221,221,221,0.5); }

.ex div.ligne   {animation: defilement 3s linear infinite alternate; }
@keyframes defilement 
{
 from { left: 0; }
 to   { left: 400px; }
}
Code html: 
<div class="defil ex">
        animation-direction: alternate;
        <div class="ligne"></div>
</div>
Résultat:
animation-direction: alternate;

Défilement linéaire et infini

Pour le deuxième exemple, nous allons utiliser linear et alternate

Exemple 2: Code CSS: 
.ex2 div.ligne   { -webkit-animation: defilement 3s linear infinite;
                   animation: defilement 3s linear infinite; }
Code html: 
<div class="defil ex">
        animation-direction: normal;
        <div class="ligne"></div>
</div>
Résultat:
animation-direction: normal;

Une fenêtre sur une image

En délimitant une fenêtre sur une grande image comme Celle-ci, il est possible d'utiliser l'animation pour la voir. Exemple:

Code CSS: 
#fenetre                 { width:148px; height:280px;
                           position: relative; overflow:hidden;  
                           border:1px solid #000; }
#fenetre #carteimg       { width:800px; height:600px; 
                           position:absolute; top:-10px; left:-10px;
                           background: url(/old/debutcss/images/animation/projetweb.gif); }
#fenetre:hover #carteimg { -webkit-animation: anim 8s 1 normal;
                           animation: anim 8s 1 normal;
                           
/*  -webkit-animation-name: anim;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-name: anim;
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-direction: normal;                 */	
    
/*     hack:  pour arrêter l'animation           */
                           left: -643px;
                           top: -308px; }
@keyframes anim 
{
0%     { left:0px; top:-10px;	    }
6.25%  { left:-169px; top:-10px;	}
12.50% { left:-169px; top:-10px;	}
18.75% { left:-327px; top:-10px;	}
25%    { left:-327px; top:-10px;	}
31.25% { left:-485px; top:-10px;	}
37.5%  { left:-485px; top:-10px;	}
43.75% { left:-643px; top:-10px;	}
50%    { left:-643px; top:-10px;	}
56.25% { left:-169px; top:-308px;	}
62.5%  { left:-169px; top:-308px;	}
68.75% { left:-327px; top:-308px;	}
75%    { left:-327px; top:-308px;   }
81.5%  { left:-485px; top:-308px;	}
87.5%  { left:-485px; top:-308px;	}
93.75% { left:-643px; top:-308px;	}
100%   { left:-643px; top:-308px;	}
}
Code html: 
<div id="fenetre">
	<div id="carteimg"></div>
</div>
Résultat:

Passez la souris sur l'image