如何初始化jquery关键帧答案

【问题标题】：How to initialise jquery Keyframes如何初始化jquery关键帧
【发布时间】：2015-06-11 23:05:07
【问题描述】：

我正在尝试将jquery Keyframes 用于动态创建的关键帧动画。我的页面上有六个图标（可能更多），它们都需要动画为以下范围之间的随机 x 和 y 值：

x = 1-5 y = 13-20

动画应该允许图标移动/悬停/摆动，使用上述范围随机选择的值。

我正在使用 jQuery 关键帧，它把自己描述为：

允许[ing] 使用回调事件动态生成 CSS3 关键帧

首先我随机生成x和y

var x = randomInt(5, 1); // use this value for x in translate3d
var y = randomInt(20, 13); // use this value for y in translate3d

工作正常。

然后我使用文档中的语法创建关键帧，包括我的 x 和 y 值：

$.keyframe.define([{
   name: 'gentleHover',
   '0%': {'tranform': 'translate3D(0px,0px,0px)'},
   '50%': {'tranform': 'translate3D('+x+'px,'+y+'px,0px)'},
   '100%': {'tranform': 'translate3D(0px,0px,0px)'}
}]);

然后我调用动画来播放：

$('#'+iconID+' img').playKeyframe(
    'gentleHover 1s linear infinite'
);

没有出现任何错误，变量都按预期正确，但没有发生任何事情动画的 IRT。我可以看到动画正在应用于图标：

<img src="http://digitalshowcase.somethingbigdev.co.uk/assets/cats/4.png" class="boostKeyframe" style="animation-play-state: initial; -webkit-animation-play-state: initial; animation-duration: 1s; -webkit-animation: gentleHover 1s linear infinite; animation-timing-function: linear; animation-delay: initial; animation-iteration-count: infinite; animation-direction: initial; animation-fill-mode: initial; animation-name: gentleHover;">

我也可以看到正在创建的关键帧，但我无法让它播放？

这是一个包含以上所有内容的实时链接：

http://digitalshowcase.somethingbigdev.co.uk/cats-test.html

编辑：

我刚刚测试了通过 jQuery 生成的代码，发现生成的代码实际上不能用于动画，所以这可能是问题所在。但我看不出生成的代码有什么问题，因为我觉得一切正常？：https://jsfiddle.net/h359tt4L/

【问题讨论】：

你试过$.keyframe.debug = true;吗？也许它会显示问题所在。我没有看到您的代码与文档中的代码之间存在重要区别，因此它应该可以工作。
@Regent 我有。调试显示“应用样式”和“渲染样式”完全符合我的预期。但是没有动画播放。
顺便问一下，$.keyframe.define 在document.ready（或window.load）里面吗？
已解决。转换拼写错误。
确实是 ;) 在您之前的问题中是正确的。

标签： jquery css css-animations keyframe

【解决方案1】：

在您的示例中，“transform”拼写错误。修复后，它在 chrome 中对我有用。

您还可以通过更改来更接近规范... transform:translate3D(0px, 0px, 0px); 至 transform:translate3D(0, 0, 0);

【讨论】：