H2 - P2019

Développement web

Cours 04 - 2014-10-05

CSS3

Animations et transitions

Les animations de ces slides sont faites avec des transitions CSS3

Différence entre transition et animation

La transition se fait entre un état A et un état B

L'animation se fait le long d'une timeline et peut donc passer par plusieurs étapes

Transitions

Propriétés CSS

Il existe 4 propriétés pour faire une transition.

  • transition-property
    Propriétés CSS qui vont subir les transitions.
    Défaut : all
  • transition-duration
    Durée de la transition (s/ms)
    Défaut : 0s
  • transition-timing-function
    Vitesse de la transition (ease, linear, ease-in, ease-out, ease-in-out) aussi appelé easing
    Défaut : ease
  • transition-delay
    Délais avant le départ (s/ms)
    Défaut : 0s

Il est possible d'écrire ces 4 propriétés en une seule

Exemple


.transition {
    transition-property        : left;
    transition-duration        : 1s;
    transition-timing-function : ease;
    transition-delay           : 0s;
}
					

.transition {
    transition:left 1s ease 0s;
}
					


.transition {
	transition-property        : all;
	transition-duration        : 2s;
	transition-timing-function : ease-out;
	transition-delay           : 1s;
}
					

.transition {
    transition:all 2s ease-out 1s;
}

Ce qu'on peut modifier

À peu près tout ce qui est quantifiable

  • width, height
  • color
  • top, right, bottom, left
  • transformations (css3)
  • gradients (css3)
  • http://goo.gl/aAFuvy : Liste complète officielle

Courbes de bézier

Créer ses propres easing

http://goo.gl/F1wlfi : Wikipedia

http://goo.gl/Z5fmL5 : Générateur

Courbes de bézier

Courbes de bézier

Le choix de la courbe de bézier devrait se décider à l'étape de création mais se fait en général à l'étape de développement

Exemple CSS3


.transition {
    transition-timing-function:cubic-bezier(0.2,1.2,0.8,-0.2);
}
						


.transition {
    transition-timing-function:cubic-bezier(1,0,0,1);
}

Transition / transformations

Les transitions fonctionnent particulièrement bien avec les transformations

Lorsque vous le pouvez, préférez les transitions aux autres propriétés comme left, width, etc.

Transform (translateX)

Left

Compatibilité

Can I Use : http://caniuse.com/#feat=css-transitions


.transition {
     -webkit-transition:left 1s; /* Chrome / Safari */
        -moz-transition:left 1s; /* Firefox */
          -o-transition:left 1s; /* Opera */
             transition:left 1s; /* General */
}

Animations

Comme les transitions

Mais avec un contrôle dans le temps

Propriétés CSS

Il existe 7 propriétés dont les 2 suivantes sont obligatoires

  • animation-name*
    Nom des keyframes
    (explication plus tard)
  • animation-duration*
    Durée de l'animation
    (similaire aux transitions)
  • animation-timing-function
    Type de transition (ease, linear, ease-in, ease-out, ease-in-out, personnalisée)
    (similaire aux transitions)
  • animation-delay
    Retard avant le départ (s/ms)
    (similaire aux transitions)
  • animation-iteration-count
    Combien de fois jouer l'animation (1 par défaut)
  • animation-direction
    Direction de l'animation (normal, reverse, alternate, alternate-reverse)
  • animation-play-state
    État par défaut de l'animation (running, paused)

Une fois les propriétés en place, il faut définir la timeline avec la syntaxe CSS @keyframes suivie du nom de l'animation

Chaque keyframe est définie par le pourcentage de l'animation (ex: 50% = moitié de la durée) et les propriétés à appliquer

Le nom de l'animation doit respecter les règles de nomenclature des classes CSS

  • Lowercase
  • Tirets
  • Underscores
  • Chiffres (sauf en premier caractère)

Exemples


.animation {
    animation-name     : monanimation;
    animation-duration : 3s;
}
					

.animation {
    animation:monanimation 3s;
}
					

@keyframes monanimation {
    0%   {left:0px;}
    50%  {left:800px;}
    70%  {left:250px;}
    100% {left:500px;}
}
Actualiser pour voir l'animation 


.animation {
	animation-name     : monanimation;
	animation-duration : 3s;
}
					

.animation {
    animation:monanimation 3s;
}
					

@keyframes monanimation {
    0%   {left:0px;width:100px;}
    50%  {left:800px;width:50px;background:green;}
    70%  {left:700px;width:300px;background:red;}
    100% {left:0px;width:50px;}
}
Actualiser pour voir l'animation 


.animation {
    animation-name            : monanimation;
    animation-duration        : 3s;
    animation-iteration-count : 2;
}
					

.animation {
    animation:monanimation 3s ease 0s 2;
}
					

@keyframes monanimation {
    0%   {left:0px;}
    50%  {left:800px;}
    70%  {left:250px;}
    100% {left:500px;}
}
Actualiser pour voir l'animation 


.animation {
	animation-name      : monanimation;
	animation-duration  : 3s;
	animation-direction : reverse; 
	/* normal / reverse / alternate / alternate-reverse */
}
					

.animation {
    animation:monanimation 3s ease 0s 2 reverse;
}
					

@keyframes monanimation {
    0%   {left:0px;}
    50%  {left:800px;}
    70%  {left:250px;}
    100% {left:500px;}
}
Actualiser pour voir l'animation 


.animation {
	animation-name            : monanimation;
	animation-duration        : 3s;
	animation-iteration-count : infinite;
	animation-direction       : alternate;
}
					

.animation {
    animation:monanimation 3s ease 0s infinite alternate;
}
					

@keyframes monanimation {
    0%   {left:0px;}
    50%  {left:800px;}
    70%  {left:250px;}
    100% {left:500px;}
}
					


.animation {
    animation:monanimation 3s ease 0s infinite;
    animation-play-state:paused;
}
.container:hover .animation {
    animation-play-state:running;
}
					

@keyframes monanimation {
    0%   {left:0px;}
    50%  {left:800px;}
    70%  {left:250px;}
    100% {left:500px;}
}

Ce qu'on peut modifier

Cf. slide sur les transitions

Compatibilité

Can I Use : http://caniuse.com/#feat=css-animation



.animation {
    -webkit-animation:monanimation 3s;
       -moz-animation:monanimation 3s;
         -o-animation:monanimation 3s;
            animation:monanimation 3s;
}
@-webkit-keyframes monanimation {
	0%   {left:0px;}
	50%  {left:800px;}
	70%  {left:250px;}
}
@-moz-keyframes monanimation {
	0%   {left:0px;}
	50%  {left:800px;}
	70%  {left:250px;}
}
@-o-keyframes monanimation {
	0%   {left:0px;}
	50%  {left:800px;}
	70%  {left:250px;}
}
@keyframes monanimation {
	0%   {left:0px;}
	50%  {left:800px;}
	70%  {left:250px;}
}

Dans un site, vos transition/animations doivent suivre quelques règles :

  • Subtiles (rapides, peu prononcées)
  • Agréables
  • Homogènes
  • Performantes
  • Ne pas gêner l'UX
Google Material Design

Démonstrations

L'année dernières