css - css3 ツールチップのトランジションが機能しない

Question

http://jsfiddle.net/RUjBh/4/

.tooltip{
position:relative
}
.tooltip:hover:after{
    background:#fff !important;
    border-radius: 30px / 120px;
    bottom: -8px;
    box-shadow:0 2px 4px #646464;
    color:#9B9B9B;
    content: attr(title);
    left: 110%;
    padding: 20px 30px;
    z-index: 98;
    width: 240px;
    position:absolute;
    opacity:0.4;font:20px "modernRegular" !important;
    transition: all 1s;
}
.tooltip:hover:after:hover{
    background:#fff !important;
    border-radius: 30px / 120px;
    bottom: -8px;
    box-shadow:0 2px 4px #646464;
    color:#9B9B9B;
    content: attr(title);
    left: 110%;
    padding: 20px 30px;
    z-index: 98;
    width: 240px;
    position:absolute;
    opacity:1;font:20px "modernRegular" !important;
}

これを機能させようとしましたが、これまでのところ運がありません。私は何を間違っていますか？どうすればこれを機能させることができますか?

前もって感謝します。