Transition-timing-function

La propriété transition-duration, habituellement utilisée à l’intérieur de la propriété raccourcie transition, sert à définir la fonction décrivant la façon dont la transition va se dérouler : la transition n’est pas nécessairement linéaire, sa vitesse et même sa direction peuvent changer :

//CSS
.exemple {
    transition-timing-function: ease-out;
}

La propriété peut prendre une des valeurs suivantes :

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end

Pour certaines, l’effet ne sera pas très évident, sauf si la durée est suffisamment longue.

Chacun des mots-clés prédéfini a une valeur équivalente de courbe de Bézier ou de fonction de stepping (dans lesquelles la transition avance par “pas”). Par exemple, les deux fonctions de timing suivantes sont équivalentes :

//CSS
.exemple {
  transition-timing-function: ease-out;
}

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

De même pour celles-ci :

//CSS
.exemple {
  transition-timing-function: step-start;
}

.exemple-2 {
  transition-timing-function: steps(1, start);
}

Utiliser steps() et les courbes de Bézier

La fonction steps() vous permet de spécifier des intervalles pour la fonction de timing. Elle prend un ou deux paramètres, séparés par une virgule : un nombre entier positif et une valeur optionnelle start ou end. S’il n’y a pas de deuxième paramètre, ce sera par défaut end.

Pour comprendre les fonctions de stepping, voici une démo qui utilise steps(4, start) pour la boîte de gauche et steps(4, end) pour la boîte de droite. Faites un survol de chacune pour voir la différence.

See the Pen yBChk by Louis Lazaris (@impressivewebs) on CodePen.

Lorsqu’on spécifie start, le changement de valeur s’effectue au début de chaque intervalle, alors qu’avec end (spécifié ou par défaut) le changement s’effectue à la fin de chaque intervalle.

Les horloges internationales de Donovan Hutchinson offrent une illustration intéressante de l’utilisation de steps :

See the Pen World clocks by Donovan Hutchinson (@donovanh) on CodePen.

L’analyse en détail des valeurs de courbe de Bézier dépasse le cadre de cette introduction, mais vous trouverez les références de bons outils à la fin de l’article.

Pour la compatibilité dans tous les navigateurs, n’oubliez pas les préfixes constructeurs, ou mieux, utilisez Autoprefixer.

//CSS
.exemple {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

À lire également dans La Cascade :

Subtilités de CSS Transitions, par Louis Lazaris

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Animez votre site avec CSS3, par openclassrooms
Transitions CSS3, par Alsacréations

articles en anglais :

Using CSS3 transitions, a comprehensive guide, par Louis Lazaris
cubic-bezier.com de Lea Verou, un outil super pratique pour s’amuser à apprendre les courbes de Bézier
CSS3 Bézier Curve Tester, par Michel Gotta, pour construire et tester vos courbes de Bézier.


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.