Question

我正在尝试使用jquery Keyframes来动态创建关键帧动画。我的页面上有六个图标（可能更多），这些图标都需要设置为以下范围之间的随机class Message extends AppModel { public $hasMany=array('MessageDetail'); public $belongsTo = array( 'User'=>array( 'className'=>'User', 'foreignKey'=>'user_id', ), 'Doctor'=>array( 'className'=>'User', 'foreignKey'=>'doc_id' ), 'Petprofiles'=>array( 'className'=>'PetProfiles', 'foreignKey'=>'petprofiles_id' ) ); }和x值：

y x = 1-5

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

我使用的jQuery关键帧将其描述为：

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

首先，我随机生成y = 13-20和x

工作正常。

然后，我使用文档中的语法创建关键帧，包括我的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值：

然后我正在调用动画：

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

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

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

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

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

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

编辑：

我刚刚使用jQuery生成的代码进行了测试，发现生成的代码实际上并没有动画，所以这可能就是问题所在。但是我看不出生成的代码有什么问题，因为它对我来说都很好看？：https://jsfiddle.net/h359tt4L/

Answer 1

在您的示例中，“transform”拼写错误。修好后，它对我来说很有用。

您还可以通过更改来更紧密地遵循规范...... transform:translate3D(0px, 0px, 0px); 至 transform:translate3D(0, 0, 0);

如何初始化jquery关键帧

编辑：

1 个答案: