How to initialise jquery Keyframes

Question

I'm trying to use jquery Keyframes for dynamically created keyframe animations. I have six icons on my page (could be more) which all need to be animated to random x and y values between the following ranges:

x = 1-5 y = 13-20

The animation should allow the icon to move/hover/bob around with the values randomly selected using the above range.

I am using jQuery keyframes which describes itself as:

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

Firstly I am randomly generating x and 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

Works fine.

Then I am creating the keyframe using the syntax found in the documentation, including my x and y values:

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

And then I am calling the animation to play:

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

Not getting any errors, variables are all correct as expected but nothing happens IRT to the animation. I can see the animation is being applied to the icon:

<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;">

I can also see the keyframe being created but I can't get it to play it?

Here is a live link including all of the above:

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

Edit:

I have just tested with the code generated via the jQuery and have discovered the generated code doesn't actually work to animate, so perhaps this is the issue. But I cannot see what is wrong with the generated code as it all looks OK to me?: https://jsfiddle.net/h359tt4L/

Answer 1

In your example "transform" is spelt incorrectly. After fixing that, it worked for me in chrome.

You can also follow the spec a little bit closer by changing... transform:translate3D(0px, 0px, 0px); to transform:translate3D(0, 0, 0);