Blog iamvdo.meC’est quoi une transition en CSS ?
Les Transitions permettent de modifier les valeurs de propriétés CSS dans le temps, d’un état A à un état B. Par exemple, il est possible de modifier la taille d’un élément progressivement.
Utilisation des transitions
La propriété se décompose en plusieurs autres propriétés, décrite ici :
-
transition-property: la(les) propriété(s) CSS à modifier. -
transition-duration: le temps total de la transition ( en secondes, millisecondes). -
transition-timing-function: la méthode d’interpolation (accélération, décélération) -
transition-delay: le temps avant que la transition ne démarre.
Il existe aussi la propriété raccourcie transition.
Voici un exemple de transition qui modifie la taille de l’élément. Celle-ci dure 2 secondes et utilise la méthode ease, c’est à dire avec une accélération naturelle.
transition: width 2s ease;Le support dans les navigateurs...
Les transitions CSS3 sont implémentées dans IE 10, Firefox 4, Chrome 4, Safari 3.1, Opéra 10.5 et *tous* les mobiles. Cependant, pour pouvoir les utiliser, il faut préfixer toutes les propriétés avec -webkit, -moz-, -ms- et -o-, ce qui nous donne :
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;Notes :
- IE10 version 6 est le premier navigateur a supporté les propriétés non préfixées.
#1par Frederick JK, le 12 avril 2013
Site très motivant, les explications sont simples et courtes ! remarquable travail.
#2par may, le 17 avril 2014
Bonjour
comment faire pour faire des transitions d’image lors de l’arrive sur le site ?
merci
#3par css3create, le 18 avril 2014
@may : Tu peux utiliser les animations CSS qui se déclenchent au chargement, ou passer par du JavaScript (en ajoutant une classe sur un élément à animer).