Keyframes error

Question

I did this to simulate the basic effects of jQuery
I tried sololearn web and it works fine, but in the mobile app it gave me an error what is the problem with my code or the web viewer that SoloLearn uses does not support the animated JavaScript API?
Thanks for all your answers.
https://code.sololearn.com/W2y1CSke0j54/?ref=app

Answer 1

Emanuel Maliaño here is a JavaScript fade
https://code.sololearn.com/WYPYLFeQbwEV/?ref=app

Answer 2

Emanuel Maliaño here is a working jQuery fade out and fade in
https://code.sololearn.com/WMRjd8w241nz/?ref=app

Answer 3

Emanuel Maliaño I keep looking at your keyframes error seeing partial transformation ({ opacity 0} to what ?);
this.keyframes = [{ opacity: 0 }];

Answer 4

Emanuel Maliaño I got as far as .then(() => {
line 50
https://code.sololearn.com/WXG2n4nzoujS/?ref=app

Answer 5

Animation works fine in the Sololearn web app. I don't know why it doesn't work here.

Answer 6

It seems like all of the then(s) have the same problem Emanuel Maliaño

Answer 7

BroFar I know that jquery works fine but I am not using jquery.I did the effects with vanilla JavaScript.
Please check the error.

Answer 8

BroFar Thanks man for your answers but i need to know why my code fails.

Answer 9

BroFar The animations I made are based on the initial properties of each element in the case of this.keyframes ({opacity: 0}) it would be for the first element that its initial opacity is 1 and when you click the FadeOut button its opacity it will be zero.
it is same for the other elements.