Transition et animation avec CSS

Transitions sur un texte

Elles portent sur les attributs suivants : color, background-color, font-size, margin, letter-spacing quand la souris survole le texte concerné.
La balise span est utilisée dans cet exemple, mais on a des effets analogues avec d'autres balises.

Css :

les déclarations ↓↑ 

/* Transitions sur du texte */
ul {}		 
ul.xmp1 li  { font:15pt times;}
ul.xmp1 li span {
  text-shadow: 2px -1px 1px #555;
  margin-right:9px;letter-spacing:2px;
  }
/* Paramètres de la transition */
ul.xmp1 li span {
 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
     -ms-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
  /* Propriétés concernées */
  transition-property:color,background-color,font-size,
     margin, letter-spacing;
  transition-duration:   1s,              1s,     0.5s, 
         2s,         0.5s;
  transition-delay: 0s, 1s
  color: blue;
  }
/* Déclenchement */
ul.xmp1 li span:hover {
   color: green; background-color:#FFF;
  letter-spacing:3px; /* font-size:1.2em; */
  margin-left:9px; margin-right:0px;
  }

Html le code ↓↑ 

<ul class="xmp1">
  <li><span>Créer un effet</span>
     au survol de la souris
  </li><li><span>d’ouverture et de fermeture</span>
  </li><li><span>test</span> : 
     www.quirksmode.org/css/transitions.html
  </li><li><span>ou</span> : 
     letrainde13h37.fr/17/transitions-et-animations-css/
</li></ul>

Exemple de « boutons »


  Nous voyons ci-après comment est définie l'animation de couleur que l'on voit sur les boutons.
  Ici un bouton , une balise a lien avec balise a et une balise span balise span
 
 

Css paramètres d'animation ↓↑ 

/* Animation "pourtour" */
@-webkit-keyframes pourtour {
  0% { -webkit-box-shadow: 0 0 9px rgba(240, 140, 66, 0.5);
     border-color: rgba(255,0,0,0.5); }
100%{-webkit-box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1);
     border-color: rgba(255,0,0,1.0); }
  }
@-moz-keyframes pourtour {
  0% { -moz-box-shadow: 0 0 9px rgba(240, 140, 66, 0.5);
     border-color: rgba(255,0,0,0.5); }
  100%{-moz-box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1);
     border-color: rgba(255,0,0,1.0);}
  }
@-o-keyframes pourtour {
  0% { box-shadow: 0 0 9px rgba(240, 140, 66, 0.5);
     border-color: rgba(255,0,0,0.5); }
  100% { box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1);
     border-color: rgba(255,0,0,1.0); }
  }
@keyframes pourtour {
  0% { box-shadow: 0 0 9px rgba(240, 140,66, 0.5);
     border-color: rgba(255,0,0,0.5); }
  100% { box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1);
     border-color: rgba(255,0,0,1.0); }
  }

Css déclarations statiques et déclenchement ↓↑ 

/* Apparence « statique » */
a.animBtn,
span.animBtn,
button.animBtn {
  padding:0 7px;
  height: 1.4em;
  border: 1px solid #ccc;
  border-color: rgba(255,0,0,0.5);
  font-size:1.0em;
  text-align: center; color: #444;
  -webkit-border-radius: 1.2em;
     -moz-border-radius: 1.2em;
          border-radius: 1.2em;
  -webkit-box-shadow: 0 0 4px rgba(240, 140, 66, 0.5);
          box-shadow: 0 0 4px rgba(240, 140, 66, 0.5);
  }
/* Déclenchement de l'animation */
a.animBtn:hover,
span.animBtn:hover,
button.animBtn:hover {
  cursor:pointer; 
  background-color:#FDB;

  -webkit-animation-name: pourtour;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;

  -moz-animation-name: pourtour;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-delay: 0s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;

  -o-animation-name: pourtour;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-delay: 0s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;

  animation-name: pourtour;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }

Html le code ↓↑ 

<div style="background:white;">
<br> 
Nous voyons ci-après comment est définie l'animation
de couleur que l'on voit sur les boutons.
<br> 
Ici un bouton  <button class="animBtn" title="la souris survole">
balise button</button>
 une balise a  <a class="animBtn" title="la souris survole">
lien avec balise a</a>
et une balise span  <span class="animBtn" title="la souris survole">
balise span</span>

<br> 
<br> 
</div>
 
Autre bouton tiré de http://css3.bradshawenterprises.com/animations/

Css paramètres d'animation ↓↑ 

/* définition animation "glow" */
@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66,140,240,0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66,140,240,0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66,140,240,0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66,140,240,0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0);
    border-color: rgba(0,0,255,1.0);
    }
  }

Css : déclaration, déclenchement ↓↑ 

/* animationDemo2 : partie statique */
#animationDemo2 {
  width:255px;
  margin:10px auto;
}
#animationDemo2 button {
  width: 255px;
  height: 35px;
  background: #cde;
  border: 2px solid #ccc;
  border-color: rgba(0,0,255,0.5);
  font-size:18px;
  color: #000;
  text-shadow: rgba(20,20,20,0.5) 1px 1px 5px;
  text-align: center;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: 0 0 16px rgba(66,140,240,0.5);
  box-shadow: 0 0 16px rgba(66,140,240,0.5);
  }
/* animationDemo2 : déclenchement */
#animationDemo2 button:hover  {
  background-color:#cce;
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: glow;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;

  -o-animation-name: glow;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;

  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  }

Html : le code ↓↑ 

<div id="animationDemo2">
     <button>bouton original</button>
     </div>

Apparition d'un texte

Passer la souris sur la boîte
Explication
div.textePr { width:342px; height: 192px;} div.texteSec { width:342px; height: 192px;} div.textePr { position:relative; border:solid 4px #FA0; ... } div.texteSec { position:absolute; left:-2px; top:-2px; ... }
La boîte change d'une position initiale à sa position finale par une transition régulière transition et animation
Autre animation, un peu différente,
montrant que la boîte secondaire
évolue de façon plus complexe
En effet, elle dépasse sa position finale avant d'y revenir
Les effets ci-dessus sont obtenus par l'utilisation des styles et du code html ; il n'y a pas de code javascript.
Bien sûr il y a deux blocs ou deux « boîtes » (balise div) ; l'une -classe textePr- est visible initialement, l'autre -classe texteSec- est visible lors de l'animation ; pour maîtriser les positions il est pratique d'avoir une autre boîte -classe boites- qui les englobe.
Nous voyons d'abord le code HTML et CSS pour la création des boîtes ; ensuite nous voyons le code CSS permettant l'animation et la vision de la boîte secondaire quand la souris survole la boîte principale.
1. Création des « boîtes »
La largeur des boites ci-contre est plus petite que celle utilisée dans les déclarations de style.
De plus ci-contre la boîte secondaire est visible alors qu'elle est initialement cachée par la déclaration : "opacity:0";
 
Noter aussi que ci-contre la boîte secondaire est détachée, alors que dans les styles elle est superposée à la boîte principale (quand la souris n'est pas sur les boîtes).
Boite principale,
visible
Boîte secondaire
sera visible au survol de la souris

Css pour la création code ↓↑ 

/* Boite englobante */
div.boites {
  float:left; margin-left:20px;
  background-color:#EDF;
  }	  
div.textePr , div.texteSec  
   { width:342px; height: 192px;}
/* Boîte toujours visible */  
div.textePr {
  position:relative;
  border:solid 4px #FA0;
  box-shadow: 0px 0px 8px #000;
  color: black;
  padding:9px;
  }
/* Boîte non visible */  
div.texteSec {
  position:absolute; 
  left:-4px; top:-4px;
  border-top:solid 4px #0AF;
  border-right:solid 4px #0AF;
  border-left:solid 4px #0AF;
  color: grey; font-size:1.2em;
  padding:9px;
  opacity:0;
  }
 

Html de la création code ↓↑ 

<div class="boites">
  <div class="textePr"> 
    <h5 style="margin:0px">Explication</h5>
    div.textePr { width:342px; height: 192px;}
    div.texteSec{ width:342px; height: 192px;}
    par une transition régulière
    div.textePr {
      position:relative; border:solid 4px #FA0;
      ...  }		
    div.texteSec {
      position:absolute; left:-2px; top:-2px;
      ...  }	
    <div class="texteSec">
     La boîte change d'une position	  
     initiale à sa position finale
     par une transition régulière	
     <a ...>transition et animation</a>
        </div>	  
    </div>
  </div>

La boîte de classe "boites" contient une boîte de classe "textePr", qui elle même contient une boîte de classe "texteSec".
Le code html de la boîte de classe textePr est en vert ci-dessus.

 
2. Animation
Elle est obtenue uniquement par des déclarations qui complètent celles vues ci-dessus.

Css les paramètres ↓↑

/* Paramètres de l'animation */ 
@-moz-keyframes animTexteSec {
  from  { left: -4px;  top:-4px; opacity:0.0; }
     1% { left:342px; top:192px; opacity:0.9; }
    25% { left: 77px; top: 44px; opacity:0.7; }
     to { left: -4px; top: -4px;              }
  }
@-webkit-keyframes animTexteSec {
  from  { left: -4px; top: -4px; opacity:0.0; }
     1% { left:342px; top:192px; opacity:0.9; }
    25% { left: 77px; top: 44px; opacity:0.7; }
     to { left: -4px; top: -4px;              }
  }
@-ms-keyframes animTexteSec {
  from  { left: -4px; top: -4px; opacity:0.0; }
     1% { left:342px; top:192px; opacity:0.9; }
    25% { left: 77px; top: 44px; opacity:0.7; }
     to { left: -4px; top: -4px;              }
  }
 

Css déclenchement ↓↑ 

/* Déclencher l'animation au passage de la souris
   sur la boîte principale */
div.textePr:hover div.texteSec {
  -moz-animation: animTexteSec 1s ease-out 1;
  -webkit-animation: animTexteSec 1s 1;
  -ms-animation: animTexteSec 1s 1;
  background-color:white;
  opacity:0.9;
  }
Pour l'animation de la boîte de droite, la seule modification est la trajectoire de la boîte secondaire. C'est uniquement les déclarations css correspondantes qui sont présentées ci-dessous.

paramètres de l'animation de droite code CSS ↓↑ 

/* Paramètres de l'animation de droite
pour les navigateurs type "mozilla" */
@-moz-keyframes animTexteSec2 {
  from  { left: -4px; top: -4px; opacity:0.0; }
     1% { left:342px; top:192px; opacity:0.6; }
    25% { left: 77px; top: 44px; opacity:0.7; }
    50% { left:-32px; top:-16px; opacity:0.8; }
     to { left: -4px; top: -4px; opacity:0.9; }
  }
3. Remarques
  1. Pour que le texte de la boîte secondaire soit lisible quand elle recouvre la boîte principale, il faut que ce texte soit écrit sur un fond qui cache en partie le contenu de la boîte principale.
  2. Pour un déclenchement défini uniquement pas des déclarations CSS il est nécessaire que la boîte secondaire soit incluse dans la boîte principale ; dans le code html il y a dans le corps de la balise <div class="textePr">, inclusion de la balise <div class="texteSec">.
  3. Pour positionner facilement la boite secondaire (<div class="texteSec">) on a introduit une boite englobante (<div class="boites">)
  4. Les paramètres de l'animation (de gauche) montrent qu'il y a trois étapes

Transitions sur une image

L'effet visuel est plus marqué car l'image va être remplacée par du texte.
L'image s'efface par la gauche ; le fond arrive par la droite.
Puis le texte apparaît.

Css les déclarations ↓↑ 

/* Un cadre avec coins arrondis et ombrage */
.cadre {
  border:solid 5px #486;
  /* arrondir les coins */
  -webkit-border-radius:3px;
     -moz-border-radius:3px;
          border-radius:3px;
  /* une ombre autour du cadre */
  -webkit-box-shadow:0 0 7px black;
     -moz-box-shadow:0 0 7px black;
          box-shadow:0 0 7px black;
  }

/* Transitions sur image */
div.zEcran {
  position:relative; left:35px;
  width:300px; height:180px;
  overflow:hidden;
  }
div.zMouvante { background-color:#EDF;
  position:relative; left:00px;
  width:600px;
  }
div.zMouvante img {
  position:relative; 
  width:300px; height:180px;
  }
div.zMouvante div.zInterne {
  position:absolute; left:300px; top:0px;
  width:300px; height:180px;
  background-color:#F80;
  background:-webkit-gradient(linear
                    ,left,right,from(#B44),to(#F80));
  background:-webkit-linear-gradient(left,#B44,#F80);
  background:   -moz-linear-gradient(left,#B44,#F80);
  background:    -ms-linear-gradient(left,#B44,#F80);
  background:     -o-linear-gradient(left,#B44,#F80);
  background:        linear-gradient(left,#B44,#F80);
  }
div.zCachee {
  position:absolute; left:0px; top:0px;
  /* 290=300-2*5 ou 290px = 300px - 2*5px */
  width:290px; height:180px;
  padding:5px 10px 0px 5px;
  overflow:hidden; color:white;
  opacity:0;
  }

/* Paramètres des transitions */
div.zEcran div.zMouvante {
  /* sur la zone qui se déplace */
  -webkit-transition:all 1.1s ease;
     -moz-transition:all 1.1s ease;
      -ms-transition:all 1.1s ease;
       -o-transition:all 1.1s ease;
          transition:all 1.1s ease;
  }
div.zEcran div.zCachee {
  /* sur le texte caché */
  -webkit-transition:all 1.5s ease 1.0s ;
     -moz-transition:all 1.5s ease 1.0s ;
      -ms-transition:all 1.5s ease 1.0s ;
       -o-transition:all 1.5s ease 1.0s ;
          transition:all 1.5s ease 1.0s ;
  }

/* Déclenchement des transitions */
div.zEcran:hover div.zMouvante { 
  left:-300px;
  }
div.zEcran:hover div.zCachee {
  opacity:1;
  }

Html le code ↓↑ 

<div class="zEcran cadre">
  <div class="zMouvante">
     <img src="../../u/genepi300x180.jpg">
     <div class="zInterne"></div>
     </div>
  <div class="zCachee">
        L'image s'efface par la gauche ;
        le fond arrive par la droite.
         <br />Puis le texte apparaît.
     </div>
  </div><!-- class="zEcran" -->
 

Transformations avec changements de taille, rotation ...

Des effets plus complexes pour agrémenter le parcours d'une page.

Que se passe-t-il ?

Le titre rapetisse et
l'image tourne puis s'estompe, sans toutefois disparaître totalement.
Puis le texte apparaît.

Css les déclarations ↓↑ 

/* Transitions sur image */
div.zCadre {
  position: relative;
  width:300px; height:180px;
  overflow: hidden;
  margin: 0px 15px;
  border: solid 8px #ffffff;
  border-radius: 6px;
  box-shadow: 0px 0px 7px #000000;
  }
div.zVisible img {
  opacity:1;
  }
div.zCadre div.zMasquee {
/* contenu caché */
  width: 290px; height: 170px;
  padding: 5px;
  position: absolute; top: 0px; left: 0px;
  text-align: center; 
  font: 11pt 'Comic Sans MS'; color:white;
  z-index: 10;
  }
div.zCadre div.zMasquee h4 {
  margin:9px auto;
  font-size:1.2em;
  color:#510;
  }
div.zCadre div.zFond {
  position: absolute; top: 0px; left: 0px;
  width: 300px; height: 180px; 
  background-color:rgba(255,136,0,0.8);
  z-index: 5;
  opacity:0;
  }

/* Paramètres des transitions */
div.zCadre div.zVisible img {
           transition: all 0.35s ease;
   -webkit-transition: all 0.35s ease;
      -moz-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
  }
div.zCadre div.zMasquee, div.zCadre div.zFond {
           transition: all 0.45s ease 0.4s;
   -webkit-transition: all 0.45s ease 0.4s;
      -moz-transition: all 0.45s ease 0.4s;
        -o-transition: all 0.45s ease 0.4s;
  opacity:0;
  }
div.zCadre div.zMasquee h4 {
/* zone agrandie 4 fois */
          transform: scale(4);
  -webkit-transform: scale(4);
     -moz-transform: scale(4);
       -o-transform: scale(4);
      -ms-transform: scale(4);
          transition: all 0.45s ease 0.4s;
  -webkit-transition: all 0.45s ease 0.4s;
     -moz-transition: all 0.45s ease 0.4s;
       -o-transition: all 0.45s ease 0.4s;
  }

/* Déclenchement */
div.zCadre:hover div.zVisible img {
          transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
  }
/* rendre visible */
div.zCadre:hover div.zMasquee {
  opacity:1;
  }
div.zCadre:hover div.zFond {
  opacity:1;
  }
div.zCadre:hover div.zMasquee h4 {
/* retour à la taille normale */
          transform: scale(1);
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
       -o-transform: scale(1);
      -ms-transform: scale(1);
  }
 

Html le code ↓↑ 

<div class="zCadre">
  <div class="zVisible">
     <img src="../../u/genepi300x180.jpg">
     <div class="zMasquee">
        <h4>Que se passe-t-il ?</h4>
        Le titre rapetisse et<br>
        l'image tourne et s'estompe, sans 
        toutefois disparaître totalement.
        <br>Puis le texte apparaît.
        </div>
     <div class="zFond"></div>
     </div>
  </div>

Références utilisées

http://css3.bradshawenterprises.com/animations/
http://www.startyourdev.com/css/style-css-animation
http://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
http://www.the-art-of-web.com/css/css-animation/
http://codepen.io/valhead/pen/rfump
https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS
des effets : http://daneden.github.io/animate.css/