减慢 CSS 不透明度动画答案

【问题标题】：Slow down CSS Opacity Animation减慢 CSS 不透明度动画
【发布时间】：2012-07-27 09:22:05
【问题描述】：

我想减慢 .opacity CSS 属性中的动画时间。就像，我希望它延迟 0.2 毫秒或类似的东西。

为了更好地了解，当悬停在我的网站上的精选帖子时会添加不透明度：http://www.thetechnodaily.com

记住：我没有使用过 jQuery。它的纯 CSS。

【问题讨论】：

标签： css performance animation opacity css-transitions

【解决方案1】：

您似乎在寻找的是CSS Transitions。

转换允许您设置转换的delay 和length。

【讨论】：

【解决方案2】：

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

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

More info

【讨论】：

注意：将过渡放在悬停规则中只会提供单向过渡。如果你把它放在主规则中，它会双向转换。

【解决方案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;  
}

【讨论】：