CSS3 获取动画的动态值

Question

我有以下代码，只需在屏幕上移动我的图像：

                /* This is the animation code. */
        @-webkit-keyframes example {
   from { -webkit-transform: translateX(0px); }
   to   { -webkit-transform: translateX(1900px) }
}
        /* This is the element that we apply the animation to. */
        img#container {
            -webkit-animation: example 1s ease 0s 1 normal;
        }

我无法解决的问题是将translateX动画值设置为在javascript中计算的值，例如屏幕中心的x位置。有没有办法在javascript中设置"to"属性，然后应用id名称？

Answer 1

要设置 CSS3 转换值，请考虑使用 jQuery 和 .transit 插件。该网页解释了不同CSS3动画效果的演示。

示例：

$('#container').transition({ x: '1900px' });

查看他们的源代码，您会发现在jQuery中执行各种效果是乏味的，因为需要大量相对样式信息来创建所需的输出。然后，将jQuery转换为纯JavaScript等价物是值得一看的。

测试带有翻译X的.transit插件：jsFiddle

Answer 2

例如，您可以使用 CSS 表达式将 JS 值设置为您的 CSS 类

height:expression(document.body.clientHeight + "px");

这就是我们编写CSS表达式的方式。