Scribd
Importer
13 vues9 pages

Guide des transitions CSS

Les transitions CSS permettent de modifier les valeurs de propriété en douceur sur une durée donnée, en contrôlant la vitesse d'animation lors des modifications. Pour créer une transition, il faut spécifier la propriété CSS à animer et la durée de l'effet, avec des options pour le délai et la fonction de timing. La syntaxe de la propriété raccourcie permet de définir ces paramètres de manière concise.

Transféré par

ghizewimelek592
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
13 vues9 pages

Guide des transitions CSS

Les transitions CSS permettent de modifier les valeurs de propriété en douceur sur une durée donnée, en contrôlant la vitesse d'animation lors des modifications. Pour créer une transition, il faut spécifier la propriété CSS à animer et la durée de l'effet, avec des options pour le délai et la fonction de timing. La syntaxe de la propriété raccourcie permet de définir ces paramètres de manière concise.

Transféré par

ghizewimelek592
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Transition CSS

3ST1
Transitions CSS
Les transitions CSS vous permettent de modifier les valeurs de
propriété en douceur, sur une durée donnée.
les propriétés :
 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function
Les transitions CSS
Les transitions CSS permettent de contrôler la vitesse
d'animation lorsque les propriétés CSS sont modifiées. Plutôt
que le changement soit immédiat, on peut l'étaler sur une
certaine période.
Ainsi, si on souhaite passer un élément de blanc à noir, on
pourra utiliser les transitions CSS afin que cette modification
soit effectuée progressivement, selon une courbe
d'accélération donnée.
Comment utiliser les transitions CSS?

Pour créer un effet de transition, vous devez


spécifier deux choses:

1. la propriété CSS à laquelle vous souhaitez


ajouter un effet
2. la durée de l'effet

Remarque: si la partie durée n'est pas


spécifiée, la transition n'aura aucun effet, car la
valeur par défaut est 0.
 Les transitions CSS vous permettent de choisir :
 les propriétés à animer en les listant explicitement
 le début de l'animation
 la durée de l'animation
 la façon dont la transition s'exécutera

Exemple:
div {
transition-property: width;
transition-delay: 1s;
 transition-duration: 2s;
transition-timing-function: linear;
}
transition-property
 Cette propriété définit le nom des propriétés CSS
pour lesquelles on veut appliquer des transitions.
transition-duration
Cette propriété défini définit la durée de la transition.
On peut une durée pour toutes les transitions ou une
durée pour chacune des propriétés.

transition-timing-function
Cette propriété définit une fonction qui décrit la façon
dont les valeurs intermédiaires sont calculées.

transition-delay
Cette propriété indique le temps à attendre entre le
moment où la propriété est modifiée et le début de la
transition.
 La syntaxe de la propriété raccourcie transition est :

 div {
 transition: <property> <duration> <timing-function> <delay>;
 }
Spécifiez la courbe de vitesse de la transition
La propriété transition-timing-function spécifie la courbe de vitesse de
l'effet de transition, peut avoir les valeurs suivantes:
 ease : valeur par défaut. Permet de créer une transition relativement
lente au début puis qui s’accélère au milieu et qui se termine
lentement ;
 linear : permet de créer une transition totalement linéaire c’est-à-dire
qui va aller à la même vitesse du début à la fin ;
 ease-in : permet de créer une transition avec un départ lent puis qui
s’accélère ensuite ;
 ease-out : permet de créer une transition qui va ralentir à la fin ;
 ease-in-out : permet de créer une transition lente au début puis qui
s’accélère au milieu et qui se termine lentement. Ressemble
fortement à transition-timing-function : ease mais démarre plus
lentement ;
 cubic-bezier(x1,y1,x2,y2) : sert à créer une transition à la vitesse
totalement personnalisé en renseignant une courbe de Bézier.
Retarder l'effet de transition

 La propriété transition-delay spécifie un délai (en secondes)


pour l'effet de transition.

Vous aimerez peut-être aussi