fix(animation-frames-timing-function): replace frames() which is not a timing function

[madhuroshan]

Description

In mdn/css-examples/animation-frames-timing-function/index-waa.html

In div.animate(keyframes,options) options object have easing function given as frames(10) but frames(10) is not a valid value of easing functions.

Can't find any easing function named frames in mdn docs . So I replaced frames with steps (we can add others like cubic-bezier and other easing functions)

changed var easingFunctions = ["frames(10)", "steps(10)", "ease-in"]; to var easingFunctions = ["steps(5)", "steps(10)", "ease-in"];

Fixes #145

[estelle]

The index page reads:

The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. Run the example live. You can also find versions that show the same timing function used with transitions, and used with the Web Animations API.

So this text is intentional. We should delete the whole example rather than edit it and the paragraph in https://github.com/mdn/css-examples/blob/main/README.md that mentions it.

Paging @chrisdavidmills, as the original author ... 6 years ago ... just to confirm.

[caugner]

Yes those are the changes required

We just need to reformat the code, waiting on a reply on this comment to understand how to proceed.

[madhuroshan]

okay

[OnkarRuikar]

We just need to reformat the code, waiting on a reply on this comment to understand how to proceed.

For now, I suggest you get the formatted code from this Prettier playground link.

Only change from default setting is --bracket-same-line is set to true. And html parser is used.

[madhuroshan]

Add the formatted code and commit the changes?

[OnkarRuikar]

Add the formatted code and commit the changes?

yes

[caugner]

Oops, sorry, hadn't see your last two comments!

[madhuroshan]

You have added the formatted code right? So, everything is done then?

[caugner]

You have added the formatted code right? So, everything is done then?

Yes, all done. :)

[caugner]

Thank you @madhuroshan! 🎉

[madhuroshan]

Thank you @caugner @chrisdavidmills