Safari 3.1 et + , Chrome 4 et + , FireFox 4 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +
- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
- 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
- <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
- <head>
- <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
-
-
- <!-- Style CSS -->
- <link rel='stylesheet' type='text/css' href='transitions.css' />
-
-
-
- </head>
- <body>
-
-
-
-
- <div class='transitions' id='transition_multi_proprietes'>Transition
-
-
- <!-- Javascript -->
-
- </body>
- </html>
- .transitions{
- float:left;
- width:28%;
- margin:0 2% 15px 0;
- padding:5px 10px;
- text-align:center;
- background:#9c3;
- }
-
- .transitions:hover{
- background:#690;
- }
-
-
- #transition_au_survol{
- /*
- Les préfixes pour les navigateurs :
- -webkit- : Chrome, Safari, Android
- -khtml- : Konqueror
- -moz- : Firefox et Mozilla
- -ms- : Internet Explorer
- -o- : Opera
- Aucun préfixe : Préfixe par défaut
- */
-
- /*
- transition-property : propriété à laquelle la transition s'applique
- (utilisez la valeur "all" pour appliquer la transition à toutes les propriétés)
- transition-duration : durée de la transition
- transition-timing-function : courbe de vitesse de la transition
- (ease , linear , ease-in , ease-out , ease-in-out , cubic-bezier)
- transition-delay : temps avant l'exécution de la transition
- */
-
- -webkit-transition-property:background;
- -khtml-transition-property:background;
- -moz-transition-property:background;
- -ms-transition-property:background;
- -o-transition-property:background;
- transition-property:background;
-
- -webkit-transition-duration:0.3s;
- -khtml-transition-duration:0.3s;
- -moz-transition-duration:0.3s;
- -ms-transition-duration:0.3s;
- -o-transition-duration:0.3s;
- transition-duration:0.3s;
-
- -webkit-transition-timing-function:ease;
- -khtml-transition-timing-function:ease;
- -moz-transition-timing-function:ease;
- -ms-transition-timing-function:ease;
- -o-transition-timing-function:ease;
- transition-timing-function:ease;
-
- -webkit-transition-delay:0.5s;
- -khtml-transition-delay:0.5s;
- -moz-transition-delay:0.5s;
- -ms-transition-delay:0.5s;
- -o-transition-delay:0.5s;
- transition-delay:0.5s;
-
- }
-
- #transition_abregee{
- /* Toutes ces lignes CSS ci-dessus peuvent aussi s'écrire en abrégé */
- -webkit-transition:background 0.3s ease 0.5s;
- -khtml-transition:background 0.3s ease 0.5s;
- -moz-transition:background 0.3s ease 0.5s;
- -ms-transition:background 0.3s ease 0.5s;
- -o-transition:background 0.3s ease 0.5s;
- transition:background 0.3s ease 0.5s;
- }
-
- #transition_multi_proprietes{
- -webkit-transition:background 0.3s ease , color 0.2s linear;
- -khtml-transition:background 0.3s ease , color 0.2s linear;
- -moz-transition:background 0.3s ease , color 0.2s linear;
- -ms-transition:background 0.3s ease , color 0.2s linear;
- -o-transition:background 0.3s ease , color 0.2s linear;
- transition:background 0.3s ease , color 0.2s linear;
- }
-
- #transition_multi_proprietes:hover{
- color:#f00;
- }
-
- /*
- Transition sur toutes les propriétées :
-
- -webkit-transition:all 0.3s;
- -khtml-transition:all 0.3s;
- -moz-transition:all 0.3s;
- -ms-transition:all 0.3s;
- -o-transition:all 0.3s;
- transition:all 0.3s;
- */