animation - 没有应用过渡的 CSS3 变换对象位置

Question

我正在寻找一种简单的方法来获取对象并转换其 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 属性而不通过转换/转换前缀。

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

Answer 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