7 ms·

Time-Based CSS Animations

241 points by spirit23 2y ago

nikisweeting 2y ago
I also recommend using negative animation delay values if you want to control the progress via JS. e.g. animation-delay: -1500ms will begin the animation immediately but jump to 1.5s into the animation. Controlling this value with JS lets you effectively scrub through CSS animations via JS, making every animation compatible with game-engine style compute-update-render tick loops. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-d...
- 9dev 2y ago
  That should also enable iOS style, scroll-offset bound animations, right?
  - nikisweeting 2y ago
    Yeah you can do tons of interaction-dependent stuff without losing the GPU-accelerated nature and declarative style of CSS animations. We built a high performance animation library on this concept: https://github.com/Monadical-SAS/redux-time https://github.com/Monadical-SAS/redux-time
  - afavour 2y ago
    Scroll linked animations are the best way to do that: https://web.dev/shows/http-203/Qf5wdXOxW3E https://web.dev/shows/http-203/Qf5wdXOxW3E Sadly no Safari support yet. (attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)
    - easyThrowaway 2y ago
      Unfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.
      - afavour 2y ago
        The exception there is hardware accelerated CSS transforms, which will work great.
        rasz 2y ago
        "hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(
        easyThrowaway 2y ago
        I should check it on a more recent release, but at least on Chrome 80-ish and earlier CSS transforms were evaluated fully in software mode when blending filters or transparency effects were active, at least on mac os.
        afavour 2y ago
        That’s not what I’ve observed. But in any case, the point in the context here is that such CPU usage doesn’t tie up the JS event loop.
GalaxyNova 2y ago
Whatever you're doing isn't working on Firefox. Edit: Just read the disclaimer, whoops!
- deleted 2y ago
  [deleted]
- kevingadd 2y ago
  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).
  - capitainenemo 2y ago
    Same here. chromium, blank, firefox animating fine.
TekMol 2y ago
CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers into it?
- toxik 2y ago
  Just wait until we have WebSockets in CSS! Jokes aside, CSS is declarative and while there is overlap between problems solvable by JS and CSS, I think that’s only natural. I’m actually really excited for all the new features added to CSS lately, less interpreted code is better.
- joestrong 2y ago
  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
  - mattgperry 2y ago
    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 Chrome you can see this in effect. The root node is animating a CSS variable. 117 elements have their style recalculated. Every frame - yet no animations are running. There's also a tiny paint triggered too, obviously there's been no changes so it is tiny in this instance, but a paint is always triggered when a CSS variable updates. This is why animating x and y separately via CSS and a style like `translate(var(--x) var(--y))` would be worse than animating them via JS ala Framer Motion/GSAP.
    - 2y ago
ulrischa 2y ago
Very impressive. But somehow I think we just reached the point coming close to what we were able to do with flash decades before. I do not want flash back but a more user friendly tool to create css animations. If somebody knows any I would be glad.
silvestrov 2y ago
The animation at the bottom of the page is very impressive. It looks very much like a <video> rather than <div> elements.
chrisjj 2y ago
Interestingly without 'Experimental feature flags' demos before mod() work, though mod() and sin() do nothing - on latest Android Chrome.
rtcode_io 2y ago
https://RTCode.io 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 https://RTCode.io (To import pens, simply replace the hostname with xcodepen.io in your URLs.)
- simple10 2y ago
  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?
  - rtcode_io 2y ago
    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 https://meet.elefunc.com).
keepamovin 2y ago
I wanted this for a while so I could do a 'box-breathing' thing. With the inhale-hold-exhale-hold stages all being customizable to fit your body and go for the effect you wanted. Could not figure out a way to do it (sans JS or insane complexity) without something like what's on this page. Holy stylesheets! This page has really creative demos!!! Haha :)
- spartanatreyu 2y ago
  Isn't that just an animation curve in css?
  - keepamovin 2y ago
    I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states. I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/ https://quietkit.com/box-breathing/
    - spartanatreyu 2y ago
      Well I could replicate that example with an animation curve using only css: https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100 https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100 But if you want each step's duration to be parameterizable then you'll need to reach for js, I'd recommend the Animation API.
KRAKRISMOTT 2y ago
Anyone want to try replicating YouTube's upvote counter fly-in animation?
krebby 2y ago
For anything more advanced than a simple easing function or some basic keyframes on one or two channels you'll quickly run into the limitations of this approach. I've been using Theatre.js the last few years and really loving it. It's a library divided into two parts; one is a studio UI with a timeline for editing keyframes and bezier curves, and the other is a runtime for taking those keyframes and interpolating values in relation to a timeline. Try it for anything that requires coordinated animations. https://www.theatrejs.com/ https://www.theatrejs.com/
simple10 2y ago
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-animations-flip-em-good-372281598865 https://medium.com/outsystems-experts/flip-your-60-fps-anima...
simple10 2y ago
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 https://caniuse.com/?search=%40property
- andypants 2y ago
  If anybody wants to try the demos in firefox, go to `about:config` and toggle on `layout.css.properties-and-values.enabled`.
- simple10 2y ago
  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.
datarez 2y ago
[dead]
hartator 2y ago
Super good job. The clock looks super polished.

241 points by spirit23 2y ago

I also recommend using negative animation delay values if you want to control the progress via JS. e.g. animation-delay: -1500ms will begin the animation immediately but jump to 1.5s into the animation. Controlling this value with JS lets you effectively scrub through CSS animations via JS, making every animation compatible with game-engine style compute-update-render tick loops. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-d...

9dev 2y ago
That should also enable iOS style, scroll-offset bound animations, right?
- nikisweeting 2y ago
  Yeah you can do tons of interaction-dependent stuff without losing the GPU-accelerated nature and declarative style of CSS animations. We built a high performance animation library on this concept: https://github.com/Monadical-SAS/redux-time https://github.com/Monadical-SAS/redux-time
- afavour 2y ago
  Scroll linked animations are the best way to do that: https://web.dev/shows/http-203/Qf5wdXOxW3E https://web.dev/shows/http-203/Qf5wdXOxW3E Sadly no Safari support yet. (attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)
  - easyThrowaway 2y ago
    Unfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.
    - afavour 2y ago
      The exception there is hardware accelerated CSS transforms, which will work great.
      - rasz 2y ago
        "hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(
        easyThrowaway 2y ago
        I should check it on a more recent release, but at least on Chrome 80-ish and earlier CSS transforms were evaluated fully in software mode when blending filters or transparency effects were active, at least on mac os.
        afavour 2y ago
        That’s not what I’ve observed. But in any case, the point in the context here is that such CPU usage doesn’t tie up the JS event loop.

GalaxyNova 2y ago

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

deleted 2y ago
[deleted]
kevingadd 2y ago
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).
- capitainenemo 2y ago
  Same here. chromium, blank, firefox animating fine.

TekMol 2y ago

CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers into it?

toxik 2y ago
Just wait until we have WebSockets in CSS! Jokes aside, CSS is declarative and while there is overlap between problems solvable by JS and CSS, I think that’s only natural. I’m actually really excited for all the new features added to CSS lately, less interpreted code is better.
joestrong 2y ago
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
- mattgperry 2y ago
  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 Chrome you can see this in effect. The root node is animating a CSS variable. 117 elements have their style recalculated. Every frame - yet no animations are running. There's also a tiny paint triggered too, obviously there's been no changes so it is tiny in this instance, but a paint is always triggered when a CSS variable updates. This is why animating x and y separately via CSS and a style like `translate(var(--x) var(--y))` would be worse than animating them via JS ala Framer Motion/GSAP.
  - 2y ago

ulrischa 2y ago

Very impressive. But somehow I think we just reached the point coming close to what we were able to do with flash decades before. I do not want flash back but a more user friendly tool to create css animations. If somebody knows any I would be glad.

silvestrov 2y ago

The animation at the bottom of the page is very impressive. It looks very much like a <video> rather than <div> elements.

chrisjj 2y ago

Interestingly without 'Experimental feature flags' demos before mod() work, though mod() and sin() do nothing - on latest Android Chrome.

rtcode_io 2y ago

https://RTCode.io 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 https://RTCode.io (To import pens, simply replace the hostname with xcodepen.io in your URLs.)

simple10 2y ago
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?
- rtcode_io 2y ago
  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 https://meet.elefunc.com).

keepamovin 2y ago

I wanted this for a while so I could do a 'box-breathing' thing. With the inhale-hold-exhale-hold stages all being customizable to fit your body and go for the effect you wanted. Could not figure out a way to do it (sans JS or insane complexity) without something like what's on this page. Holy stylesheets! This page has really creative demos!!! Haha :)

spartanatreyu 2y ago
Isn't that just an animation curve in css?
- keepamovin 2y ago
  I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states. I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/ https://quietkit.com/box-breathing/
  - spartanatreyu 2y ago
    Well I could replicate that example with an animation curve using only css: https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100 https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100 But if you want each step's duration to be parameterizable then you'll need to reach for js, I'd recommend the Animation API.

KRAKRISMOTT 2y ago

Anyone want to try replicating YouTube's upvote counter fly-in animation?

krebby 2y ago

For anything more advanced than a simple easing function or some basic keyframes on one or two channels you'll quickly run into the limitations of this approach. I've been using Theatre.js the last few years and really loving it. It's a library divided into two parts; one is a studio UI with a timeline for editing keyframes and bezier curves, and the other is a runtime for taking those keyframes and interpolating values in relation to a timeline. Try it for anything that requires coordinated animations. https://www.theatrejs.com/ https://www.theatrejs.com/

simple10 2y ago

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-animations-flip-em-good-372281598865 https://medium.com/outsystems-experts/flip-your-60-fps-anima...

simple10 2y ago

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 https://caniuse.com/?search=%40property

andypants 2y ago
If anybody wants to try the demos in firefox, go to `about:config` and toggle on `layout.css.properties-and-values.enabled`.
simple10 2y ago
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.

datarez 2y ago

[dead]

hartator 2y ago

Super good job. The clock looks super polished.