:after 伪元素的 CSS3 转换
看看这个小提琴: http://jsfiddle.net/sajYc/
:after 的转换
伪元素在 Firefox 中工作,但在基于 webkit 的浏览器中失败。知道这是否会在未来的版本中出现吗?有什么非 jquery 过度杀伤的解决方法吗?
基本上,我在页面上使用它来在背景图像精灵的两种状态之间淡入淡出(而不是像小提琴中那样的两种颜色)。图标的正常状态和悬停状态之间的平滑过渡。所以我不想只是为了让这个动画发挥作用而添加一堆实际元素。
Check out this fiddle: http://jsfiddle.net/sajYc/
The transition for the :after
pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?
Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不幸的是,这是 Webkit 浏览器和 IE 中的一个已知问题:
http://css-tricks.com/13555-transitions-and-animations-on-css- generated-content/
然而,图像精灵状态之间的淡入淡出在 jQuery 中是可行的。本教程提供了一个很好的说明:
http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/
Unfortunately, this is a known issue in Webkit browsers and IE:
http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
However, fading between image sprite states is do-able in jQuery. This tutorial gives a good run down:
http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/