Cours ⇒ HTML5, CSS3 facebook twitter youtube

Les animations CSS ⇒ & Les propriétés d'animations



Les animations se décomposent en plusieurs propriétés, décrites ici :

  • animation-name : le nom de l’animation à utiliser.
  • animation-duration : le temps total de l’animation.
  • view-tenthanimation-timing-functionview-tenth : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : view-tenthlinearview-tenth, view-tentheaseview-tenth, view-tenthease-inview-tenth, view-tenthease-outview-tenth, view-tenthease-in-outview-tenth, view-tenthsteps (nombre, start | end)view-tenth, view-tenthcubic-bezier( p1, p2, p3, p4)view-tenth
  • animation-iteration-count : le nombre de répétition de l’animation. La valeur view-tenthinfiniteview-tenth permet de jouer une animation en continu.
  • animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
  • animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C.
  • animation-delay : le temps avant que l’animation ne démarre.
  • animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci.

Il existe aussi la propriété raccourcie view-tenthanimationview-tenth.

Voici un exemple qui utilise l’animation créée ci-dessus. Cette animation durera 5 secondes avec un delai de 2 secondes et utilise une méthode view-tenthlinearview-tenth, c’est à dire sans accélération, ni décélération.

 

Propriété: animation-name


La propriété animation-name définit le nom de l’animation à utiliser. Cette animation doit être définie avec les @keyframes


-webkit-animation-name: nomAnimation;
-moz-animation-name: nomAnimation;
-ms-animation-name: nomAnimation;
-o-animation-name: nomAnimation;
animation-name: nomAnimation;
 

Propriété: animation-duration

Fixer la durée totale de votre animation

 

La propriété view-tenthanimation-durationview-tenth définit le temps d’exécution de l’animation. Cette durée peut être spécifiée en secondes ou en millisecondes.

-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
 animation-duration: 2s;

 

 

 

Propriété: animation-timing-function

 

La propriété view-tenthanimation-timing-functionview-tenth précise la méthode d’accélération entre l’état initial et final de chaque étape d’une animation. Celle-ci peut être une accélération ou au contraire une décélération.

Les mots-clés suivants sont disponibles :

  • view-tentheaseview-tenth : action par défaut. Accélération naturelle. Le départ est rapide, l’arrivée lente.
  • view-tenthlinearview-tenth : aucune accélération, ni décélération.
  • view-tenthease-inview-tenth : départ lent. L’arrivée parait donc plus rapide.
  • view-tenthease-outview-tenth : arrivée lente. Le départ parait donc plus rapide.
  • view-tenthease-in-outview-tenth : départ lent, arrivée lente. Une accélération se fait sentir au milieu de l’animation.
  • view-tenthcubic-bezier( p1, p2, p3, p4)view-tenth : création d’une courbe d’accélération personnalisée (grâce aux courbes de bézier).
  • view-tenthsteps( nombre, start|end)view-tenth : Progression par palier (animation image par image)

Exemple:

.maclass{
     -webkit-animation-timing-function: ease-in;
      -moz-animation-timing-function: ease-in;
      -ms-animation-timing-function: ease-in;
      -o-animation-timing-function: ease-in;
       animation-timing-function: ease-in;
}
 

Propriété: animation-iteration-count

 


Répéter votre animation CSS plusieurs fois

La propriété animation-iteration-count précise le nombre de fois où l’animation doit être reproduite. Un entier est requis.

Le mot-clé infinite permet de répéter l’animation en boucle.

.maclass{
     -webkit-animation-iteration-count: 5;
        -moz-animation-iteration-count: 5;
         -ms-animation-iteration-count: 5;
          -o-animation-iteration-count: 5;
             animation-iteration-count: 5;
}
 

Propriété: animation-direction

 

 

La propriété animation-direction défini le sens dans lequel l’animation est jouée :

 

    normal : l’animation va de l’étape 1 à n.
    reverse : l’animation va de l’étape n à 1. (sens contraire)
    alternate : l’animation va de l’étape 1 à n les cycles impairs (1,3,5...) et de l’étape n à 1 les cycles pairs (2,4,6...).
    alternate-reverse : l’animation va de l’étape 1 à n les cycles pairs et de l’étape n à 1 les cycles impairs.

Animation en sens inverse

.maclass{
     -webkit-animation-direction: reverse;
     -moz-animation-direction: reverse;
     -ms-animation-direction: reverse;
     -o-animation-direction: reverse;
     animation-direction: reverse;
}
 

Propriété: animation-delay

 


Retarder le départ de votre animation

 

La propriété animation-delay permet de décaler le départ d’une animation, par rapport au déclenchement (qui peut être le chargement de la page, un survol, un focus clavier, un case cochée...).

L’unité est la même que pour animation-duration, à savoir les secondes et millisecondes.

 

.maclass{
     -webkit-animation-delay: 500ms;
     -moz-animation-delay: 500ms;
     -ms-animation-delay: 500ms;
     -o-animation-delay: 500ms;
     animation-delay: 500ms;
}
 

Propriété: animation-fill-mode

 

Contrôler vos éléments avant et après l’animation


La propriété animation-fill-mode permet de spécifier l’état des éléments animés avant le début ou après la fin de l’animation.

Les mots-clés sont les suivants :

    backwards : les éléments sont dans l’état de la première étape de l’animation avant le début de celle-ci.
    forwards : les éléments sont dans l’état de la dernière étape de l’animation après la fin de celle-ci.
    both : combinaison de backwards et forwards.
    none : par défaut. Les éléments ne sont modifiés que pendant l’animation. Ils peuvent avoir un aspect visuel différent avant et après la fin de celle-ci.

.maclass{
     -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
       -ms-animation-fill-mode: both;
       -o-animation-fill-mode: both;
        animation-fill-mode: both;
}
 

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces