NetPlusMédia

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 +

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'>
  4. <title>Les transitions en CSS3</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='transitions.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class='transitions' id='transition_au_survol'>Transition au survol</div>
  17.  
  18. <div class='transitions' id='transition_abregee'>Transition abr&eacute;g&eacute;e</div>
  19.  
  20. <div class='transitions' id='transition_multi_proprietes'>Transition
  21. milti-propri&eacute;t&eacute;s</div>
  22.  
  23.  
  24. <!-- Javascript -->
  25.  
  26. </body>
  27. </html>

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 prfixes 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 prfixe : Prfixe par dfaut
  24.   */
  25.  
  26. /*
  27.   transition-property : proprit laquelle la transition s'applique
  28.   (utilisez la valeur "all" pour appliquer la transition toutes les proprits)
  29.   transition-duration : dure 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'excution 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 abrg */
  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 proprites :
  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

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter