Svelte 5: Only first animation applied from comma-separated list

[jasperkelder]

Describe the bug

I just noticed a Svelte 5 bug concerning the CSS animation property where only the first animation in a comma-separated list is applied to an element. Subsequent animations after the first comma are ignored. The supplied code does work as expected in Svelte 4.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE4WSzW7CMAzHX8XKaaCywqZdQjXt4zHWHULrtlFTp0pcGEN996mUMsoYXBwn_jv-2clOZNqgF_JjJ0hVKKR4rWsRCN7W3cav0TCKQHjbuKQ7iVK9fo7CzsYUU-R5a7Bz-aXEbeZUhR4Sa6ybJYWiHGHXBWPOnK0GP-aVSsrc2YbS2V4sYWUaXPbhtl_YXtPnDpFOEzozxvD6G69SsFPkM-sqCT5RBu8Wk_8R_orvnyYXAFK9HpI2OuVCwmI-r78OygJ1XvD47OowehtO4f10qIp0pVhbgo11pQ9g1fCo39SiB7IM07C_4Zghh4ZGr_ToQVOmSTOCMoyOFGMwSE9vfrikPId9s1zs0Y71w-kvtITbtZfn2HAb4lCsjSkK-48pAlHZVGcaUyHZNdh-tj971yQQ9QIAAA==

<div></div>

<style>
	@keyframes color-change {
		from {
			background-color: blue;
		}
		to {
			background-color: green;
		}
	}

	@keyframes size-change {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(1.5);
		}
	}

	div {
		width: 100px;
		height: 100px;
		background-color: blue;
		
		/* Color-change animation works, but size-change does not */
		animation:
			color-change 3s infinite alternate,
			size-change 2s infinite alternate;
		
		/* Both work */
		/* animation: color-change 3s infinite alternate;
		animation: size-change 2s infinite alternate; */
	}
</style>

Logs

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 84.42 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.5.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.14.1 - /usr/local/bin/pnpm
    bun: 1.0.22 - /usr/local/bin/bun
  Browsers:
    Brave Browser: 120.1.61.114
    Chrome: 120.0.6099.216
    Edge: 120.0.2210.133
    Safari: 17.2.1
  npmPackages:
    svelte: next => 5.0.0-next.35

Severity

annoyance