未应用过渡的 CSS3 变换对象位置

Posted 2023-03-06

【中文标题】未应用过渡的 CSS3 变换对象位置

【英文标题】：CSS3 Transform objects position without Transition applied

【发布时间】：2011-10-10 01:40:13

【问题描述】：

我正在寻找一种简单的方法来获取一个对象并转换它的 rotateY 属性，而不用动画到它的预设过渡。

看起来有点像：

$(this).css("-webkit-transform","rotateY(180deg)");
$(this).css("-webkit-transition","10s");

然后在后面的代码中

$(this).css("-webkit-transform","rotateY(0)");
$(this).css("-webkit-transition","0");

但由于它需要设置和重置过渡动画时间，所以上面的方法对我来说不太适用。

我需要一个解决方案，可以简单地将对象从 a 点带到 b 点，而不用大惊小怪。我似乎找不到不通过转换/转换前缀来设置 rotateY 属性的方法。

任何帮助都会很棒，在此先感谢。

【问题讨论】：

您能否提供一个示例来说明您要实现的目标？我做了一个小提琴，显示你提到的jsfiddle.net/sambeckhamdesign/P2YTS/14

【参考方案1】：

你需要的听起来像 CSS3 动画。

所以...在您的情况下，因为您希望动画处于完成点，您的代码将如下所示

$(this).css("-webkit-animation", "someanimation 10s forwards");

CSS3 动画中的 forwards 属性可确保动画中的终点是永久呈现的样式，因此动画将保持其结束状态，直到您卸载页面。

在您的 CSS 中，您必须添加

@-webkit-keyframes someanimation  <br />
    0% -webkit-transform: rotateY(180deg); <br />
    100% -webkit-transform: rotateY(0deg); <br />

上面的这段代码并不特定于任何类或 ID。这是它自己的部分。

这里有一些关于 CSS3 动画的文档W3C Standard

还有一篇文章Smashing Mag

【参考方案2】：

这就是你想要的-

http://jsfiddle.net/rq0574yz/2/

我已经添加了一个'S'并设置了border-right: 5px solid red，这样你就可以看到它实际上回到了它的初始位置而没有过渡。 实际上它带有过渡，但在关键帧中，我将特定的过渡持续时间缩短到几毫秒（20 毫秒），这样用户就不会识别并认为它很快就会旋转回来。

【讨论】：

我没有使用供应商前缀，例如 -webkit-、-ms- 或 -o-，没有供应商前缀，在最新的 Mozilla Firefox 中，动画可以正常工作。但是，如果您有其他浏览器，则必须添加这些供应商前缀才能以您想要的方式查看动画。这就是我喜欢 Mozilla 的原因。

您也可以通过调整百分比和整体动画持续时间轻松更改各种时间。