Repository: angular
Issue: Animation transform scale not working correctly
Labels: area: animations

### Which @angular/* package(s) are the source of the bug?

animations

### Is this a regression?

No

### Description

A very simple scale animation, you can clone the repo [here](https://github.com/keatkeat87/angular-animation-transform-matrix-issue.git).

```
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="scaleState.set('scale-up')">scale up</button>
    <button (click)="scaleState.set('scale-down')">scale down</button>
    <h1 [@scale]="scaleState()">Hello World</h1>
  `,
  styles: `
    h1 {
      margin-top: 64px;
      width: max-content;
    }
  `,
  animations: [
    trigger('scale', [
      state('scale-up', style({ transform: 'scale(5)' })),
      state('scale-down', style({ transform: 'scale(0)' })),
      transition('* <=> *', animate('5s ease'))
    ])
  ]
})
export class AppComponent {
  scaleState = signal<'scale-up' | 'scale-down'>('scale-down');
}
```

### The Problem:
![wawa2](https://github.com/angular/angular/assets/8691013/d5ba330c-ffa5-43a5-a61e-3eabaaeb5b83)
when scaling up, press the scale down button and it will stuck there.

### The Reason:
when doing the scale down animation, Angular will do something like this
```
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;
h1.animate([ 
  { transform: currentTransform, offset: 0 },
  { transform: 'scale(0)', offset: 1 }
], 
{
  duration: 5000,
  fill: 'forwards',
  easing: 'ease',
});
```
the key point is using Matrix (this is quite rare), you can play with the native Web Animation API with latest Chrome browser, there is the same problem.

### Hot to fix:
Don't use matrix. (it can only done by Angular Team)
```
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;
const matrix = new WebKitCSSMatrix(currentTransform);

h1.animate([ 
  { transform: `scale(${matrix.m11})`, offset: 0 },
  { transform: 'scale(0)', offset: 1 }
], 
{
  duration: 5000,
  fill: 'forwards',
  easing: 'ease',
});
```
or don't use scale(0), use scale(0.000001), it can be done by developer.
```
const h1 = document.querySelector<HTMLElement>('h1')!;
const currentTransform = window.getComputedStyle(h1).transform;

h1.animate([ 
  { transform: currentTransform, offset: 0 },
  { transform: 'scale(0.00001)', offset: 1 }
], 
{
  duration: 5000,
  fill: 'forwards',
  easing: 'ease',
});
```



### Please provide a link to a minimal reproduction of the bug

https://github.com/keatkeat87/angular-animation-transform-matrix-issue.git

### Please provide the exception or error you saw

```true
check the description part.
```


### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 18.0.2
Node: 20.11.1
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6
```


### Anything else?

_No response_