standards-positions VS animate.css

You can check why Mozilla and Apple have opted to not support this.

https://github.com/mozilla/standards-positions/issues/154

https://github.com/WebKit/standards-positions/issues/28

Neither Mozilla or Webkit are satisfied that the proposal is safe by default, and contains footguns for the user that can be pretty destructive.

Nope, was marked as WONTFIX: https://bugs.webkit.org/show_bug.cgi?id=182671

There was some more discussion in the webkit standards but looks like the answer is still unchanged: https://github.com/WebKit/standards-positions/issues/97

The new scrollbar styling properties are actually pretty consistent with native platforms. There's not that much flexibility with them - e.g. you can't define width in pixels, you just chose between thick, thin, or none, which match the existing native controls:

https://github.com/WebKit/standards-positions/issues/133#iss...

> To add more information to this issue. This property supports three values, auto, thin and none. These match nicely to WebKit's ScrollbarControlSize::Regular and ScrollbarControlSize::Thin and not rendering the scrollbar.

Apple puts their policy positions on GitHub too. It's just where this is done for some reason: https://github.com/WebKit/standards-positions

Not yet but one day: https://github.com/WebKit/standards-positions/issues/18#issu...

Worth also noting is WebKit's standards positions at

https://webkit.org/standards-positions/

(this one has not landed yet, likely to be opposed as well)

Animate.css

Animate.css (https://animate.style/)

Now, the content slide animation will come in later, as shown below: How about creating an altogether custom animation? Let’s make a bounce animation.

There are a few ways to create animations in React, but all of them fall into two broad categories: CSS animations, which change visual state by applying CSS rules; and, JavaScript animations, which use JavaScript to change the properties of the element. In either of those categories, you can either implement the animation from scratch, or you can use a library. On the CSS side, you can compose your animations with CSS rules, or you can use third-party libraries like Animate.css.

Use actual CSS/JS to make the effects. You can learn most of it if you search for CSS3 animations (Mozilla dev docs are a good option). You could also use a library like Animate.css

Animate.css: This CSS animation library offers different pre-built animations that can be easily applied to elements on a website. Different animations in the library, such as fades, slides, flips, and more, can be used to animate CSS Grid layouts.