:after 伪元素的 CSS3 转换

发布于 2024-12-12 04:42:37 字数 315 浏览 0 评论 0原文

看看这个小提琴: 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

苦行僧 2024-12-19 04:42:37

不幸的是,这是 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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文