{"id":6457,"date":"2025-07-15T18:38:20","date_gmt":"2025-07-15T23:38:20","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6457"},"modified":"2025-07-15T18:38:21","modified_gmt":"2025-07-15T23:38:21","slug":"stacked-transforms","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/stacked-transforms\/","title":{"rendered":"Stacked Transforms"},"content":{"rendered":"\n

I think the best way for me to show you what I want to show you is to make this blog post a bit like a story. So I’m gonna do that.<\/p>\n\n\n\n

\n\n\n\n

So I’m at CSS Day<\/a> in Amsterdam this past month, and there was a lovely side event called CSS Caf\u00e9<\/a>. I’m 90% sure it was during a talk by Johannes Odland and a coworker of his at NRK<\/a> (whose name I embarrassingly cannot remember) where they showed off something like an illustration of a buoy floating in the water with waves in front of it. Somehow, someway, the CSS property animation-composition was involved, and I was like what the heck is that?<\/em> I took notes during the presentation, and my notes simply said “animation-composition”, which wasn’t<\/span> exactly helpful.<\/p>\n\n\n\n

I nearly forgot about it when I read Josh Comeau’s blog post Partial Keyframes<\/a>, where he talks about “dynamic, composable CSS keyframes”, which, as I recall was similar to what Johannes was talking about. There is some interesting stuff in Josh’s post \u2014 I liked the stuff about comma-separating multiple animations \u2014 but alas, nothing about animation-composition<\/code>. <\/p>\n\n\n\n

So I figured I’d stream<\/a> about it, and so I did that<\/a>, where I literally read the animation-composition<\/code> docs on MDN<\/a> and played with things. I found their basic\/weird demo intriguing and learned from that. Say you’ve got a thing<\/em> and it’s got some transfoms already on it:<\/p>\n\n\n

.thing<\/span> {\n  transform<\/span>: translateX<\/span>(50px<\/span>) rotate<\/span>(20deg<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Then you put a @keyframes<\/code> animation on it also:<\/p>\n\n\n
.thing<\/span> {\n  transform<\/span>: translateX<\/span>(50px<\/span>) rotate<\/span>(20deg<\/span>);\n  animation<\/span>: doAnimation 5s<\/span> infinite alternate;\n}\n\n@keyframes<\/span> doAnimation {\n  from<\/span> {\n    transform<\/span>: translateX<\/span>(0<\/span>)\n  }\n  to<\/span> {\n    transform<\/span>: translateX<\/span>(100px<\/span>)\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Pop quiz: what is the translateX()<\/code> value going to be at the beginning of that animation?<\/p>\n\n\n\n
It’s not a trick question. If you intuition tells you that it’s going to be translateX(0)<\/code>, you’re right. The “new” transform<\/code> in the @keyframes<\/code> is going to “wipe out” any existing transform<\/code> on that element and replace it with what is described in the @keyframes<\/code> animation.<\/p>\n\n\n\n
That’s because the default behavior is animation-composition: replace;<\/code>. It’s a perfectly fine default and likely what you’re used to doing. <\/p>\n\n\n\n
But there are other possible values for animation-composition<\/code> that behave differently, and we’ll look at those in a second. But first, the fact that transform<\/code> can take a “space-separated” list of values is already kind of interesting. When you do transform: translateX(50px) rotate(20deg);<\/code>, both<\/em> of those values are going to apply. That’s also relatively intuitive once you know it’s possible.<\/p>\n\n\n\n
What is less intuitive but very interesting is that you can keep going with more space-separated values, even repeating<\/em> ones that are already there. And there I definitely learned something! Say we tack on another translateX()<\/code> value onto it:<\/p>\n\n\n
.thing<\/span> {\n  transform<\/span>: translateX<\/span>(50px<\/span>) rotate<\/span>(20deg<\/span>) translateX<\/span>(50px<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
My brain goes: oh, it’s probably basically the same as<\/em> translateX(100px) rotate(20deg);<\/code>. But that’s not true. The transforms apply one at a time, and in order. <\/em>So what actually happens is:<\/p>\n\n\n
\n
\"Illustration<\/figure>\n<\/div>\n\n\n
I’m starting to get this in my head, so I streamed again the next day<\/a> and put it to work.<\/p>\n\n\n\n
What popped into my head was a computer language called Logo<\/a> that I played with as a kid in elementary school. Just look at the main image from the Wikipedia page<\/a>. And the homepage of the manual<\/a> is very nostoligic for me. <\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n
\"Cover<\/figure>\n<\/div>\n<\/div>\n\n\n\n
We can totally make a “turtle” move like that.<\/p>\n\n\n\n
All I did here is put a couple of buttons on the page that append more transform<\/code> values to this turtle element. And sure enough, it moves around just like the turtle of my childhood. <\/p>\n\n\n\n