Time-Based CSS Animations

I also recommend using negative animation delay values if you want to control the progress via JS.<p>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.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;animation-delay" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;animation-d...</a>

For anything more advanced than a simple easing function or some basic keyframes on one or two channels you&#x27;ll quickly run into the limitations of this approach.<p>I&#x27;ve been using Theatre.js the last few years and really loving it. It&#x27;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.<p><a href="https:&#x2F;&#x2F;www.theatrejs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.theatrejs.com&#x2F;</a>

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.

<p><pre><code> 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&#x27;s possible to define a custom variable with the CSS Houdini API to track time in milliseconds. </code></pre> Why do we need all this when we have JavaScript?<p>Shouldn&#x27;t the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers into it?

The article uses custom css @properties which are awesome and have 88% browser support [1].<p>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&#x27;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.<p>[1] <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;?search=%40property" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;?search=%40property</a>

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

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

Really well written article. Chrome hasn&#x27;t yet released CSS support for mod() so most of the examples on the page don&#x27;t animate unless you&#x27;re using the preview release of Chrome.<p>If you&#x27;re not needing to control ticks and just want smooth CSS animations in all browsers, the FLIP method is useful:<p><a href="https:&#x2F;&#x2F;medium.com&#x2F;outsystems-experts&#x2F;flip-your-60-fps-animations-flip-em-good-372281598865" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;outsystems-experts&#x2F;flip-your-60-fps-anima...</a>

The animation at the bottom of the page is very impressive. It looks very much like a &lt;video&gt; rather than &lt;div&gt; elements.

<a href="https:&#x2F;&#x2F;RTCode.io" rel="nofollow">https:&#x2F;&#x2F;RTCode.io</a>, a real-time web playground without reloads (and without state resets) might greatly benefit anyone working with CSS animations&#x2F;transitions!<p>Demo on <a href="https:&#x2F;&#x2F;RTCode.io" rel="nofollow">https:&#x2F;&#x2F;RTCode.io</a><p>(To import pens, simply replace the hostname with xcodepen.io in your URLs.)

Anyone want to try replicating YouTube&#x27;s upvote counter fly-in animation?

Super good job. The clock looks super polished.

Whatever you&#x27;re doing isn&#x27;t working on Firefox.<p>Edit: Just read the disclaimer, whoops!