减慢 CSS 不透明度动画
Posted
技术标签:
【中文标题】减慢 CSS 不透明度动画【英文标题】:Slow down CSS Opacity Animation 【发布时间】:2012-07-27 09:22:05 【问题描述】:我想减慢 .opacity CSS 属性中的动画时间。 就像,我希望它延迟 0.2 毫秒或类似的东西。
为了更好地了解,当悬停在我的网站上的精选帖子时会添加不透明度:http://www.thetechnodaily.com
记住:我没有使用过 jQuery。它的纯 CSS。
【问题讨论】:
【参考方案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;
【讨论】:
以上是关于减慢 CSS 不透明度动画的主要内容,如果未能解决你的问题,请参考以下文章
Safari 上涉及不透明度、缩放和 translateY 问题的 CSS 动画