NetPlusMédia - Les transitions en CSS3
NetPlusMédia
Accueil
Notre métier
Nous contacter
Accueil
Notre métier
Nous contacter

Les transitions en CSS3

Retour

Compatibilités


Safari 3.1 et + , Chrome 4 et + , FireFox 4 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +

Télécharger le fichier

transitions.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2.  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  5. <title>Les transitions en CSS3</title>
  6. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  7.  
  8.  
  9. <!-- Style CSS -->
  10. <link rel='stylesheet' type='text/css' href='transitions.css' />
  11.  
  12.  
  13.  
  14. </head>
  16.  
  17.  
  18. <div class='transitions' id='transition_au_survol'>Transition au survol</div>
  19.  
  20. <div class='transitions' id='transition_abregee'>Transition abr&eacute;g&eacute;e</div>
  21.  
  22. <div class='transitions' id='transition_multi_proprietes'>Transition
  23. milti-propri&eacute;t&eacute;s</div>
  24.  
  25.  
  26. <!-- Javascript -->
  27.  
  28. </body>
  29. </html>
Télécharger le fichier

transitions.css

  1. .transitions{
  2.  float:left;
  3.  width:28%;
  4.  margin:0 2% 15px 0;
  5.  padding:5px 10px;
  6.  text-align:center;
  7.  background:#9c3;
  8. }
  9.  
  10. .transitions:hover{
  11.  background:#690;
  12. }
  13.  
  14.  
  15. #transition_au_survol{
  16.  /*
  17.   Les préfixes pour les navigateurs :
  18.   -webkit- : Chrome, Safari, Android
  19.   -khtml- : Konqueror
  20.   -moz-  : Firefox et Mozilla
  21.   -ms-  : Internet Explorer
  22.   -o-  : Opera
  23.   Aucun préfixe : Préfixe par défaut
  24.   */
  25.  
  26.  /*
  27.   transition-property : propriété à laquelle la transition s'applique
  28.   (utilisez la valeur "all" pour appliquer la transition à toutes les propriétés)
  29.   transition-duration : durée de la transition
  30.   transition-timing-function : courbe de vitesse de la transition
  31.   (ease , linear , ease-in , ease-out , ease-in-out , cubic-bezier)
  32.   transition-delay : temps avant l'exécution de la transition
  33.   */
  34.  
  35.  -webkit-transition-property:background;
  36.  -khtml-transition-property:background;
  37.  -moz-transition-property:background;
  38.  -ms-transition-property:background;
  39.  -o-transition-property:background;
  40.  transition-property:background;
  41.  
  42.  -webkit-transition-duration:0.3s;
  43.  -khtml-transition-duration:0.3s;
  44.  -moz-transition-duration:0.3s;
  45.  -ms-transition-duration:0.3s;
  46.  -o-transition-duration:0.3s;
  47.  transition-duration:0.3s;
  48.  
  49.  -webkit-transition-timing-function:ease;
  50.  -khtml-transition-timing-function:ease;
  51.  -moz-transition-timing-function:ease;
  52.  -ms-transition-timing-function:ease;
  53.  -o-transition-timing-function:ease;
  54.  transition-timing-function:ease;
  55.  
  56.  -webkit-transition-delay:0.5s;
  57.  -khtml-transition-delay:0.5s;
  58.  -moz-transition-delay:0.5s;
  59.  -ms-transition-delay:0.5s;
  60.  -o-transition-delay:0.5s;
  61.  transition-delay:0.5s;
  62.  
  63. }
  64.  
  65. #transition_abregee{
  66.  /* Toutes ces lignes CSS ci-dessus peuvent aussi s'écrire en abrégé */
  67.  -webkit-transition:background 0.3s ease 0.5s;
  68.  -khtml-transition:background 0.3s ease 0.5s;
  69.  -moz-transition:background 0.3s ease 0.5s;
  70.  -ms-transition:background 0.3s ease 0.5s;
  71.  -o-transition:background 0.3s ease 0.5s;
  72.  transition:background 0.3s ease 0.5s;
  73. }
  74.  
  75. #transition_multi_proprietes{
  76.  -webkit-transition:background 0.3s ease , color 0.2s linear;
  77.  -khtml-transition:background 0.3s ease , color 0.2s linear;
  78.  -moz-transition:background 0.3s ease , color 0.2s linear;
  79.  -ms-transition:background 0.3s ease , color 0.2s linear;
  80.  -o-transition:background 0.3s ease , color 0.2s linear;
  81.  transition:background 0.3s ease , color 0.2s linear;
  82. }
  83.  
  84. #transition_multi_proprietes:hover{
  85.  color:#f00;
  86. }
  87.  
  88. /*
  89. Transition sur toutes les propriétées :
  90.  
  91.   -webkit-transition:all 0.3s;
  92.   -khtml-transition:all 0.3s;
  93.   -moz-transition:all 0.3s;
  94.   -ms-transition:all 0.3s;
  95.   -o-transition:all 0.3s;
  96.   transition:all 0.3s;
  97. */

Démonstration

Les transitions en CSS3
Transition au survol
Transition abrégée
Transitionmilti-propriétés
Plan du site - Contact - Google+ - FaceBook - Twitter