放慢CSS不透明度动画的速度

Question

我想在不透明度CSS属性中放慢动画计时。比如，我希望它能延迟0.2毫秒或类似的时间。

为了获得更好的想法，当我的网站上的一个特色帖子悬停在这里时，会添加不透明度：http://www.thetechnodaily.com

请记住：我没有在这里使用jQuery。它的纯CSS。

Answer 1

您想要的似乎是CSS转换。

转换允许您设置转换的延迟和长度。

Answer 2

我认为这可能是您想要实现的目标？

http://fiddle.jshell.net/9VB72/2/

更多信息

Answer 3

使用jquery

$('#clickme').click(function() {
   $('#book').animate({
       opacity: 0.25,
       left: '+=50',
       height: 'toggle'
   }, 5000, function() {
     // Animation complete.
   });
});

http://api.jquery.com/animate/

使用css，您可以尝试以下操作：

.class:hover {
    opacity: 1; 
    -moz-transition: all 0.4s ease-out;  /* FF4+ */
    -o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.4s ease-out;  /* IE10? */
    transition: all 0.4s ease-out;  
}