如何初始化 jquery 个关键帧

Question

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

x = 1-5 y = 13-20

动画应允许图标 move/hover/bob 使用上述范围随机选择的值。

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

allow[ing] dynamic generation of CSS3 keyframes with callback events

首先我随机生成 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;">

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

这是一个直播 link，包括以上所有内容：

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

编辑：

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

Answer 1

在您的示例中 "transform" 拼写错误。修复后，它在 chrome.

对我有用

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

如何初始化 jquery 个关键帧

How to initialise jquery Keyframes

css

jquery

keyframe

css-animations

编辑：