Fonction de synchronisation de transition - Astuces CSS

La transition-timing-functionpropriété, normalement utilisée dans le cadre de la transitionsténographie, est utilisée pour définir une fonction qui décrit comment une transition se déroulera sur sa durée, permettant à une transition de changer de vitesse au cours de son cours.

.example ( transition-timing-function: ease-out; )

Ces fonctions de synchronisation sont communément appelées fonctions d'accélération et peuvent être définies à l'aide d'une valeur de mot-clé prédéfinie, d'une fonction pas à pas ou d'une courbe de Bézier cubique.

Les valeurs de mot-clé prédéfinies autorisées sont:

facilité
linéaire
facilité dans
facilité
facilité d'entrée
pas à pas
étape-fin

Pour certaines valeurs, l'effet peut ne pas être aussi évident à moins que la durée de transition ne soit définie sur une valeur plus élevée.

Chacun des mots clés prédéfinis a une valeur de courbe de Bézier cubique équivalente ou une valeur de fonction de progression équivalente. Par exemple, les deux valeurs de fonction de minutage suivantes seraient équivalentes l'une à l'autre:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Tout comme les deux suivants:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Utilisation des étapes () et des courbes de Bézier

La steps()fonction vous permet de spécifier des intervalles pour la fonction de minutage. Il prend un ou deux paramètres, séparés par une virgule: un entier positif et une valeur facultative de l'un startou l' autre end. Si aucun second paramètre n'est inclus, il sera par défaut end.

Pour comprendre les fonctions de progression, voici une démo qui utilise steps(4, start)pour la boîte à gauche et steps(4, end)pour la boîte à droite (survolez une boîte ou rechargez le cadre pour voir les transitions):

Découvrez ce stylo!

Lorsque startest spécifié, la modification des valeurs se produit au début de chaque intervalle, tandis que endprovoque la modification des valeurs à la fin de chaque intervalle.

Un examen détaillé des valeurs de la courbe de Bézier dépasse le cadre de cette référence, mais consultez les références dans la section des liens associés pour des outils qui montrent visuellement comment ces valeurs fonctionnent.

Pour la compatibilité dans tous les navigateurs pris en charge, les préfixes de fournisseur sont requis, avec la syntaxe standard déclarée en dernier:

.example ( -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; )

IE10 (la première version stable d'IE à prendre en charge transition-timing-function) ne nécessite pas le -ms-préfixe.