title: Css translate doesn't work
body: <p>I've ap problem with the translation of a tooltip. It must appear then translate up. But in my code it only appears... Can't find what is wrong in my code... Ay idea please?</p>
  
  <p>demo: <a href="http://jsfiddle.net/RWYeF/" rel="nofollow">http://jsfiddle.net/RWYeF/</a></p>
  
  <p>code:</p>
  
  <pre><code>.bulle_abo, .combulle {
      border: 1px solid #909090;
      bottom: 100%;
      color: #fff;
      display: block;
      left: -114px;
      margin-bottom: 15px;
      opacity: 0;
      display:none;
      padding: 20px;
      pointer-events: none;
      position: absolute;
      min-width: 250px;
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
      -o-transform: translateY(10px);
      transform: translateY(10px);
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
      -o-transition: all .25s ease-out;
      transition: all .25s ease-out;
      -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
      -ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
      -o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: #ffffff;
      /* Old browsers */
      background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(2%, #c9c9c9), color-stop(53%, #606060));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
      /* IE10+ */
      background: linear-gradient(to bottom, #ffffff 0%, #c9c9c9 2%, #606060 53%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#606060', GradientType=0);
      /* IE6-9 */
  }
  .combulle {
      margin-left: -36px;
  }
  /* This bridges the gap so you can mouse into the tooltip without it disappearing */
   .bulle_abo:before, .combulle:before {
      bottom: -20px;
      content:" ";
      display: block;
      height: 20px;
      left: 0;
      position: absolute;
      width: 100%;
  }
  /* CSS Triangles - see Trevor's post */
   .bulle_abo:after, .combulle:after {
      background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
      bottom: -20px;
      content:" ";
      height: 20px;
      left: 144px;
      margin-left: -13px;
      position: absolute;
      width: 20px;
  }
  .enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle {
      opacity: 0.95;
      display:block;
      pointer-events: auto;
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);
  }
  /* IE can just show/hide with no transition */
   .lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
      display: none;
  }
  .lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
      display: block;
  }
  a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
      color: rgb(0, 78, 194);
      text-shadow: 0 1px 3px rgb(255, 255, 255);
      font-size: 18px;
      -o-transition:.3s;
      -ms-transition:.3s;
      -moz-transition:.3s;
      -webkit-transition:.3s;
      transition:.3s;
  }
  a.lien_bulle:hover {
      color: rgb(228, 235, 255);
      text-shadow: 0 1px 0 #000;
  }
  .all_abo {
      position: relative;
      display: block;
      float: left;
      padding-left: 2px;
  }
  .avatar_abo_bulle {
      float: left;
      position: relative;
      height: 68px;
      width: 68px;
      display: block;
      overflow: hidden;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      box-shadow: 0px 0px 8px 1px #000;
      -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
  }
  .texte_abo_bulle {
      margin-left: 90px;
      -webkit-font-smoothing: antialiased;
      font-size: 14px;
  }
  .enveloppe_abo {
      position: relative;
      float: left;
      display: block;
      -webkit-transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
      z-index:11;
  }
  .enveloppe_bulaut {
      position: relative;
      -webkit-transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
  }
  </code></pre>