Failed to execute 'animate' on 'Element': Partial keyframes are not supported

Question

I try to add an animation to a div using jquery :

$('#footer').animate({ "width" : "13%" },1000);

it works but an error is displayed in the console like:

"Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

when i click on the right link :

but when i use a value in pixel there is no error with :

$('#footer').animate({ "width" : 68 },1000);

is there a solution to use responsive values ?

Answer 1

The problem is the way you call .animate(). You have jQuery added to your codebase but you are using the web platform's animate with the way you have called .animate(). If you want this to work fine with jQuery change from:

var player = this.move_.animate();

to

var player = $(this.move_).animate();

but if you'd like to use the JavaScript animate over jQuery then you can have this

var player = this.move_.animate({transform: [parameters.transformBegin, parameters.transformEnd]});

I have no idea what your parameters are but my example shows you add the multiple key frames as an array for each property you are animating

Answer 2

You fell into a trap. The $ you are using is not jQuery, but it's a console's API, a shortcut for document.querySelector

This means that $('#footer') does not return a jQuery object but a plain DOM element.

This means that .animate is not jQuery's method but the element's method, so you're unknowingly using the Web Animation API, not jQuery.animate.

They have a different API and you get the error.

In short, make sure that jQuery is available on your page and/or use jQuery('#footer').animate(et cetera)