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.

[chrisdavidmills]

I am impressed that you think I'll remember work that I did 6 years ago ;-)

This is really bizarre — I'm pretty sure I'm not going mad, and that there was at one point a timing function called frames(). But I can't find a mention of it anywhere except on these pages I wrote. It must've been introduced experimentally and then quickly abandoned.

I don't mind having an updated example with two different steps functions, or just deleting the frames() example altogether. Either is OK, IMO.

[madhuroshan]

Yes those are the changes required

[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