search

mdn / css-examples

Code examples that accompany the MDN CSS documentation
https://developer.mozilla.org/docs/Web/CSS
Creative Commons Zero v1.0 Universal
619 stars 854 forks source link

No output is showing on Web animations API #145

Closed srikanth-kandi closed 1 year ago

srikanth-kandi commented 1 year ago

As you provided the link to learn about the Web animations API frames example

The file I was trying to issue on mdn/css-examples/animation-frames-timing-function/index-waa.html

I was trying to explore animations and encountered this file, which was not showing the output as expected.

It was just showing the blank screen below

image

As I tried to figure out what the issue is about, I figured out some exceptions in the console window of the browser says

Uncaught TypeError: Failed to execute 'animate' on 'Element': 'frames(10)' is not a valid value for easing at 
index-waa.html:50:17

Attaching the console error below

image

madhuroshan commented 1 year ago

frames() is not an easing function, changed it to steps(). I have added a pull request that solves the issue.

srikanth-kandi commented 1 year ago

Good work @madhuroshan

srikanth-kandi commented 1 year ago

frames() is not an easing function, changed it to steps(). I have added a pull request that solves the issue.

mention this issue #145 in your pull request

madhuroshan commented 1 year ago

you can use other easing functions like cubic-bezier , ease-in-out etc as well, have gone through mdn and cant find frames as an easing function.