Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Time-Based CSS Animations

yuanchuan.dev

Post reply on HN
Print view View original

31–40 of 49 posts

Re: Time-Based CSS Animations

#31

Post by amsheehan »

mattgperry wrote: post #12
joestrong wrote: post #10

Earlier quoted context omitted.

Don't forget that CSS animations are hardware accelerated. If you're doing trig in JS for animations, you're probably also manipulating the DOM to update the UI every millisecond, which is very expensive

Most CSS animations aren't hardware accelerated. Only a few values like opacity and transform. Updating the DOM (as in innerHTML) is always expensive because it triggers layout. This is true whether you're doing it from JS or a CSS trick like on this page. Finally this approach is using CSS custom properties. These are slow - slower than JS for most things. If you stop all animations on this page and profile it via C…

We shouldn't diminish the power of transform here. It's not just one property like opacity. You can animate quite a bit on the compositor with transform

Re: Time-Based CSS Animations

#32

Post by simple10 »

Really well written article. Chrome hasn't yet released CSS support for mod() so most of the examples on the page don't animate unless you're using the preview release of Chrome.

If you're not needing to control ticks and just want smooth CSS animations in all browsers, the FLIP method is useful:

https://medium.com/outsystems-experts/flip-your-60-fps-anima...

Re: Time-Based CSS Animations

#33

Post by simple10 »

The article uses custom css @properties which are awesome and have 88% browser support [1].

One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I ended up needing to use javascript to set default values in Firefox to iron out the inconsistency between browser implementations.

[1] https://caniuse.com/?search=%40property

Re: Time-Based CSS Animations

#34

Post by andypants »

simple10 wrote: post #33

The article uses custom css @properties which are awesome and have 88% browser support [1]. One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I end…

If anybody wants to try the demos in firefox, go to `about:config` and toggle on `layout.css.properties-and-values.enabled`.

Re: Time-Based CSS Animations

#35

Post by simple10 »

simple10 wrote: post #33

The article uses custom css @properties which are awesome and have 88% browser support [1]. One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I end…

Here's how to set the property value in Javascript if needed:

Get property value defined in :root{}:

getComputedStyle(document.documentElement).getPropertyValue("--some-custom-css-var");

Set property value:

document.documentElement.style.setProperty("--some-custom-css-var", "some value");

This can work as a polyfill for browsers that do not yet have CSS @property support enabled.

Re: Time-Based CSS Animations

#36

Post by simple10 »

rtcode_io wrote: post #18

https://RTCode.io , a real-time web playground without reloads (and without state resets) might greatly benefit anyone working with CSS animations/transitions! Demo on https://RTCode.io (To import pens, simply replace the hostname with xcodepen.io in your URLs.)

Has anyone tried RTCode yet? Looks interesting but the homepage is a bit confusing as to whether it's a CodePen replacement with realtime support or can also be used for production?

Re: Time-Based CSS Animations

#37

Post by rtcode_io »

simple10 wrote: post #36
rtcode_io wrote: post #18

https://RTCode.io , a real-time web playground without reloads (and without state resets) might greatly benefit anyone working with CSS animations/transitions! Demo on https://RTCode.io (To import pens, simply replace the hostname with xcodepen.io in your URLs.)

Has anyone tried RTCode yet? Looks interesting but the homepage is a bit confusing as to whether it's a CodePen replacement with realtime support or can also be used for production?

We want to be somewhere between CodePen and Vercel (but with a focus on web standards): a real-time full-stack playground with global hosting and in-editor→edge-deployed workers(/functions).

RTCode is in private alpha. (Currently building Code Versions: diff, rollback, A/B testing; and Code Search: full-text search across all your active deployments).

Our playground and network have proven stable in production in several large enterprises for the last year.

I can answer any questions via email (support@elefunc.com) or chat (https://meet.elefunc.com).

Re: Time-Based CSS Animations

#38

Post by capitainenemo »

kevingadd wrote: post #17
GalaxyNova wrote: post #4

Whatever you're doing isn't working on Firefox. Edit: Just read the disclaimer, whoops!

Oddly on my system, it works better in Firefox (it's not animated, but all the elements are there) than it does in Chromium (completely blank where the animated demo should be).

Same here. chromium, blank, firefox animating fine.
Post reply on HN