Manuel Matuzović

Day 109: the animation-composition property

CSS animations can be composited in three ways: replace, add, and accumulate. The animation-composition property allows you to switch between them.

#100DaysOfMoreOrLessModernCSS

https://matuzo.at/blog/2024/100daysof-day109

Day 109: the animation-composition property - Manuel Matuzovic

I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.

Manuel Matuzovic
Aug 21, 2024 at 11:56amWeb
Show threadMax BöckAug 22, 2024
@matuzo how do you keep finding CSS properties I've never heard of?
Show threadManuel MatuzovićAug 22, 2024
@mxbck They are everywhere!
Show threadMax BöckAug 22, 2024
@matuzo wait, do you read
[lean in to whisper]
"the spec"?
Show threadFlorian Schroiff Aug 22, 2024

@mxbck @matuzo

🥓🥓🥓

Show threadDave 🧱 Aug 22, 2024
@mxbck @matuzo what Max said! I wish I knew this one so I wouldn’t have to copy the entire property value into my animation keyframes 😩
Show threadManuel MatuzovićAug 22, 2024
@DavidDarnes @mxbck to be fair, it's pretty new.
Show threadCSS by T. Afif Aug 22, 2024
@matuzo Here is an interesting use case: https://css-tip.com/slow-down-rotation/
Slow down a rotation on hover

A simple trick to reduce the speed of your rotating element

Show threadphlpAug 22, 2024
@css would it be possible to apply this slowdown to the infinite scroll animation as well? https://verpex.com/blog/website-tips/how-to-create-a-css-only-infinite-scroll-animation
How to create a CSS-only infinite scroll animation

Use modern CSS Tricks to create an infinite scroll animation using any kind of elements. No JavaScript required.

Verpex
Show threadCSS by T. Afif Aug 22, 2024
@phlp should be doable, I will think about it