Bugzilla

This may be a regression after introducing compositor animations for individual transforms.
For example:
```
@keyframes rotate {
  to { rotate: 1 1 0 360deg; }
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
#target {
  background: green;
  translate: 400px;
  animation: rotate 5s linear forwards;
}

<div id='target'></div>
```

Expected result: The element should running animations something like this:
```
@keyframes rotate {
  from {
    translate: 400px;
    rotate: 1 1 0 0deg;
  }
  to {
    translate: 400px;
    rotate: 1 1 0 360deg;
  }
}
```

Actual result: It seems the animation on `rotate` property overrides the `translate` property.

We may need to fall back to the main thread animation in this case.

This may be a regression after introducing compositor animations for individual transforms.
For example:
```
@keyframes rotate {
  to { rotate: 1 1 0 360deg; }
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
#target {
  background: green;
  translate: 400px;
  animation: rotate 5s linear forwards;
}

<div id='target'></div>
```

Expected result: The element should be running animations something like this:
```
@keyframes rotate {
  from {
    translate: 400px;
    rotate: 1 1 0 0deg;
  }
  to {
    translate: 400px;
    rotate: 1 1 0 360deg;
  }
}
```

Actual result: It seems the animation on `rotate` property overrides the `translate` property.

We may need to fall back to the main thread animation in this case.

This may be a regression after introducing compositor animations for individual transforms.
For example:
```
@keyframes rotate {
  to { rotate: 1 1 0 360deg; }
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
#target {
  background: green;
  translate: 400px;
  animation: rotate 5s linear forwards;
}

<div id='target'></div>
```

Expected result: The element should be running animations something like this:
```
@keyframes rotate {
  from {
    translate: 400px;
    rotate: 1 1 0 0deg;
  }
  to {
    translate: 400px;
    rotate: 1 1 0 360deg;
  }
}
```

Actual result: It seems the animation on `rotate` property overrides the `translate` property.

~~We may need to fall back to the main thread animation in this case.~~

Updated: Use base style to pass the other transform-like properties to the compositor