---
title: "Animating zooming using CSS: transform order is important… sometimes"
url: https://daily.dev/posts/animating-zooming-using-css-transform-order-is-important-sometimes-cr1miqon0
source_url: https://jakearchibald.com/2025/animating-zooming/
type: article
source: "Jake Archibald"
published: 2025-06-17T10:51:40.448Z
updated: 2025-06-17T10:52:03.061Z
tags: ["webdev", "css", "frontend"]
reading_time: 7
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Animating zooming using CSS: transform order is important… sometimes

**[Jake Archibald](https://daily.dev/sources/jakearchibald)** · 7 min read · 1 upvotes · 0 comments

## Summary

CSS transform animations can produce unexpected 'swooping' effects when using scale followed by translate due to how the browser interpolates transform values. The scale acts as a multiplier for translate values during animation, causing non-linear movement. The solution is to reorder transforms as translate first, then scale, manually multiplying translate values by the scale factor. Alternatively, using separate scale and translate properties ensures proper order. The article also explains why adding rotate(0) accidentally fixes the issue by forcing matrix interpolation.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://jakearchibald.com/2025/animating-zooming/>

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend)

[View this post on daily.dev](https://daily.dev/posts/animating-zooming-using-css-transform-order-is-important-sometimes-cr1miqon0)