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

1–10 of 49 posts

Re: Time-Based CSS Animations

#2

Post by nikisweeting »

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-d...

Re: Time-Based CSS Animations

#3

Post by 9dev »

nikisweeting wrote: post #2

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/d…

That should also enable iOS style, scroll-offset bound animations, right?

Re: Time-Based CSS Animations

#6

Post by TekMol » 

    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?

Re: Time-Based CSS Animations

#7

Post by ulrischa »

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.

Re: Time-Based CSS Animations

#8

Post by toxik »

TekMol wrote: post #6

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 i…

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.

Re: Time-Based CSS Animations

#9

Post by nikisweeting »

9dev wrote: post #3
nikisweeting wrote: post #2

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/d…

That should also enable iOS style, scroll-offset bound animations, right?

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

Re: Time-Based CSS Animations

#10

Post by joestrong »

TekMol wrote: post #6

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 i…

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
Post reply on HN