CSS平滑淡出过渡(包括文本)

我有一个简单的悬停效果，可以改变文本和背景。我想知道的是是否有一种可能的方法来减缓淡出效果…我相信你可以使用过渡css，但我对如何使用它知之甚少。

(代码不是完整的代码，不能正确工作(但应该足够了))

这里是HTML:

<div id="ourproductsleft" class="grid_3 alpha">
       <h4>Mail</h4>
       <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>
       <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p>
       <br>
       <br>
       <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>         
       </div> <!--end of ourproductsleft class 3-->

CSS

/*Backgrounds for each div*/
#ourproductsleft {
background: #F2F7FA;
/*background-image:url(../img/index/body/ourproducts/grey.png);
background-repeat:repeat;*/
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;   
}
/*Hover bacgrounds for each div*/
#ourproductsleft:hover {
background-  image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
}

/*Do not display original (mail, domain etc) text on hover view*/
#ourproductsleft:hover .replies { 
display: none;
}
/*Keep display inline for maintext (longtext) on hover */
#ourproductsleft:hover .comment { 
display: inline;
opacity: 1; 
}

我也做了一个DEMO

<div id="ourproductsleft" class="grid_3 alpha">
    <h4>Mail</h4>
    <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>
    <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p>
    <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>        
</div> <!--end of ourproductsleft class 3-->

/*Backgrounds for each div*/
#ourproductsleft {
    background: #F2F7FA;
    border-radius: 0px;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

#ourproductsleft .comment,
#ourproductsleft .replies { 
    opacity: 0; 
    transition: opacity 1s ease;
}
#ourproductsleft:hover .comment,
#ourproductsleft:hover .replies{ 
    opacity: 1; 
}

transition-property: width, border-radius, background-color;
transition-duration: 1s, 2s, 5s;
transition-timing-function:  ease, ease-out, linear;

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

-webkit-transition:2s color;
-moz-transition:2s color;
transition:2s color;

transition: 1s background 0.5 ease-in, 2s color 1s ease-out;