Ajouter un effet de transition lors de la modification d'un style à l'autre

Nous somme nombreux, que nous avons depuis long temps rêvé de pouvoir animer les pages Web rien qu’avec le style CSS sans apport de JavaScript.
Avec l’arriver de css3, il est devenu possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs principaux (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+)
Avec CSS3, nous pouvons ajouter un effet lors de la modification d'un style à l'autre, sans utiliser les animations Flash ou JavaScript.

Somaire
CSS3 cours tutorial

Transitions CSS3 Comment ça marche ?

En CSS3 les transitions sont des effets qui permettent à un élément de passer peu à peu d'un style à l'autre.
Pour ce faire, vous devez spécifier deux choses :
Spécifiez la propriété CSS à que vous souhaitez ajouter un effet
Spécifiez la durée de l'effet.

Remarque : Si la durée n'est pas spécifiée, la transition n’aura aucun effet, car la valeur par défaut est 0.
L'effet démarre lorsque la propriété CSS spécifiée change de valeur en réponse à un événement ou un script, comme quand un utilisateur passe la souris sur un élément il crée l’événement :hover

Pour comprendre l’effet ajouter par la transition nous prenons un exemple, où nous allons faire changer la couleur de lien au survole de la sourie.
Mais vous diriez vous c’est facile il suffit d’utiliser la pseudo classe a:hover  et vous avez raison, seulement le changement de la couleur est brutale et nous voulons le faire de manière douce et même en contrôlant le temps de transition.
Voici le code :

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> transition couleur de lien</title>
  <style type='text/css'>
<style type="text/css">                        
       body {   margin: 50px;  }
       a {
          font-size: 3em;
          font-weight: bold;
          color: #000;
          text-decoration: none;
          -webkit-transition-property: color;
          -webkit-transition-duration: 1s;
          transition-property: color;/*la propriété concérné */
          transition-duration: 1s;/*le temps de transition en seconde */                                              
         }
       a:hover {
                color: #f00;
               }                                             
</style>
  </style>
</head>
<body>
<h1>Transition CSS3 : couleur de lien</h1>
                         <p>
                                   <a href="#">Survolez-ça</a>
                        </p>
</body>
</html>
 

Plusieurs modifications

Pour ajouter un effet de transition pour plus d'un style, ajouter les propriétés supplémentaires, séparées par des virgules :

Exemple Contrôle de deux propriétés en même temps avec transition-proprety

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> transition couleur de lien</title>
<style type="text/css">
         body {   margin: 50px;  }
          p{
           font-size: 2em;
            font-weight: bold;

            -webkit-transition-property: background-color, padding-left;
            -webkit-transition-duration: 2s;
            transition-property: background-color, padding-left;/*les propriétés concérnées*/
             transition-duration: 2s;/*le temps de transition en seconde */                                             
             }
         p:hover {
             background-color: #f00;
             padding-left:250px
                 }                                             
</style>

  </style>
</head>
<body>
<h1>Transition CSS3 : couleur de lien</h1>
                         <p>
                                   Survolez ce paragraphe avec la sourie
                        </p>
</body>
</html>
 

Exemple : menu simple animé

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> transition couleur de lien</title>
   <style type="text/css" media="screen">
        ul {
           margin:100px;
           list-style:none;
           font: 1em "lucida grande",arial;
           }
        li {
            float:left;
            clear:left;
            background:#444;
            -webkit-transition-property: background-color, padding-left,font-size ;
            -webkit-transition-duration: .5s, .3s;
            -webkit-transition-timing-function: linear, ease-out;
              /* … and if it's standardised one day (#optimism) */

             transition-property: background-color, padding-left,font-size;
             transition-duration: .5s, .3s;
             transition-timing-function: linear, ease-out;
            }
          li:hover {
                   background:#09f;
                   padding-left:25px;
                   font-size:1.5em;
                   }
          a {
               display:block;
               padding:5px;
               color:#fff;
               text-decoration:none;   
             }
</style>
  </head>
  <body>
	<ul>
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
	</ul>
  </body>
</html>
 

Exemple : Evénement javascript pour changer le css

Dans cet exemple nous changeons le style css par un script javascript lier au mouvement de la sourie
Lorsque la sourie survole ou quitte l’élément une rotation 3D est crée et la transition contrôle cette rotation.
Et j’en profite pour mettre en évidence d’autres propriétés de transition  comme le délais :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />  
  <title>Perspective : Examples</title>
    <style>
    .conteneur {
      width: 200px;
      height: 200px;
      border: 1px solid #CCC;
    }     
             #boite {
                -webkit-perspective: 600px;
                -o-perspective: 600px;
                 perspective: 600px;
                 position: relative ;                      
                        }
    .box {
      width: 100%;
      height: 100%;
              margin-top:0;
              position:absolute;
    }
    #boite .box {
         background-color: #0ff;
         -webkit-transform: rotateY( 45deg );
         -o-transform: rotateY( 45deg );
         transform: rotateY( 45deg );
         transition: transform 2s;
         -webkit-transition:-webkit-transform 2s;
    }
  </style>
</head>
<body>
  <h1>transition </h1>
  <section id="boite" class="conteneur">
    <div class="box"><h2>Propriété transition</h2></div>
  </section>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script>
$("#boite").mouseover(function () {

$(".box").css("transform","rotateY( 180deg )");
$(".box").css("-webkit-transform","rotateY( 180deg )");
});
$("div").mouseout(function () {

$(this).css("transform","rotateY(0deg )");
$(this).css("-webkit-transform","rotateY(0deg )");
});
</script>
</body>
</html>
 

Prise en charge  des navigateurs

Propriété

Appui de navigateur

transition chrome fire fox ie opera safari
-webkit-

Opera, Firefox, Chrome et Internet Explorer 10 prennent en charge la propriété de transition.
Safari nécessite le préfixe - webkit-.
Remarque : Internet Explorer 9 et versions antérieures, ne supporte pas la propriété de transition.
Remarque : Chrome 25 et les versions antérieures, il faut le préfixe - webkit-.


Propriétés de transition

Le tableau suivant répertorie toutes les propriétés de transition :

Property

Description

transition Racourci des propriété transition
transition-property Définit l’effets qui permettent à un élément de passer peu à peu d'un style à l'autre.
transition-duration Définit la durée de la transition
transition-timing-function Définit comment un effet doit se passerv par défaut "ease"
transition-delay Définis le délais avant le début de l’effet par défaut 0

Les deux exemples ci-dessous montrent toutes les propriétés de transition  je ne donne que le code css:

Exemple Utiliser toutes les propriétés de transition à titre d'exemple :

Sélectionner le code

div
  {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
  /* Safari */
  -webkit-transition-property:width;
  -webkit-transition-duration:1s;
  -webkit-transition-timing-function:linear;
  -webkit-transition-delay:2s;
  }

 

Exemple Les mêmes effets comme indiqué ci-dessus, à l'aide de la propriété de transition raccourcie de transition :

Sélectionner le code

div
 {
  transition: width 1s linear 2s;
  /* Safari */
 -webkit-transition:width 1s linear 2s;
 }

 
Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant