平滑 CSS3 悬停过渡,同时防止抗锯齿

发布于 2024-12-14 09:21:57 字数 640 浏览 2 评论 0原文

上一个问题我想出了如何修复当元素悬停时使用 CSS3 过渡旋转元素引起的抗锯齿问题。然而,该修复改变了过渡。在修复之前,从开始到结束的过渡都很顺利。自修复以来,过渡变得非常严格。 (值得注意的是,使用 Firefox 时,过渡从来都不是顺利的,但在抗锯齿修复之前,使用 Safari 或 Chrome 时却如此。)

这是我最初使用的代码。如果您使用的是 Chrome 或 Safari,请注意将鼠标悬停在该框上时的转换:

http://jsfiddle.net/CRc9d/

这是修复抗锯齿问题的代码:

http://jsfiddle.net/JMgxC/

有没有办法协调第二个代码,以便它保留抗锯齿修复,同时提供更清晰的过渡?

In a previous question I figured out how to fix the anti-aliasing caused by rotating an element using CSS3 transitions when the element is hovered. However, that fix has changed the transition. Before the fix, the transition was smooth from start to finish. Since the fix, the transition has become very rigid. (It's worth noting that the transition was never smooth when using Firefox, but using Safari or Chrome it was, prior to the anti-aliasing fix.)

Here is the code I used originally. Note the transition when you hover over the box if you are in Chrome or Safari:

http://jsfiddle.net/CRc9d/

And here is the code with the fix for anti-aliasing:

http://jsfiddle.net/JMgxC/

Is there a way to reconcile the second code so that it preserves the anti-aliasing fix but also provides a cleaner transition?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

面犯桃花 2024-12-21 09:21:57

这听起来类似于我之前遇到的转换问题。当我从左向右移动 div 时,过渡不平滑。解决方案是确保所有 3 个 CSS 状态都有左值(0px、300px、300px)。从那时起,Firefox、Chrome、Safari 和 Opera 的过渡就很顺利。在您的情况下,您可能需要为您尝试的转换指定一个初始值。

This sounds similar to a transitions problem I ran into previously. Mine was unsmooth transitions when moving a div from left to right. The solution was to ensure that the all 3 CSS states had a left value (0px, 300px, 300px). Transitions were smooth from that point forward, for Firefox, Chrome, Safari, and Opera. In your case, you may want to specify an initial value for the transition you are attempting.

ぃ弥猫深巷。 2024-12-21 09:21:57

使用

-moz-transition-property:-moz-transform;

代替Ditto。

-moz-transition-property:rotate;

-webkit

Use

-moz-transition-property:-moz-transform;

instead of

-moz-transition-property:rotate;

Ditto for -webkit.

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