I am currently working on a side project that involves using moving divs with @keyframes and CSS3's animation property. Initially, I faced difficulties in getting this to work smoothly on webkit browsers due to issues with transform3d. However, after opting for left: and top: properties instead, I started making progress. I incorporated faster/slower buttons to adjust the animation speed by changing the seconds property inline. While this functioned well in Chrome, it did not work in IE.
To demonstrate, setting the initial animation style inline is achieved like so:
var speed = 1.5;
var animationCSS = 'myfirst '+speed+'s';
$('#button1').click(function () {
alert("Set initial speed");
$('#test')
.css('background-color', '#000')
.css('animation', animationCSS)
.css('-webkit-animation', animationCSS);
});
Using jQuery, I dynamically assign the animation CSS with a custom speed and have another button that changes the speed variable and reassigns the CSS. The animation should run again as a new inline style has been applied. This functions correctly in Chrome but not in IE10. I also have a removeCss function that seems to be working fine - it works in Chrome regardless of whether this line is included or not.
$('#button2').click(function () {
alert("Slow down and change speed");
$('#test').removeCss('animation,-webkit-animation,
speed = 10;
animationCSS = 'myfirst '+speed+'s';
$('#test').css('background-color', '#00FFFF')
.css('animation', animationCSS)
.css('-webkit-animation', animationCSS);
});
This issue is frustrating me. When inspecting the elements, I can see that the new speed variable has been applied inline, but there is no visible change taking place. Any suggestions?