Css translate doesn't work - css

Question

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?
demo: http://jsfiddle.net/RWYeF/
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;
}

Answer 1

In this selector .bulle_abo, .combulle you have two display properties:
.bulle_abo, .combulle {
...
display: block;
...
display: none;
…
}
Remove: display: none (you can't transition from none to block)
Working Fiddle