svelte [feat] Support css units in fly & blur transitions

For the fly transition, the x & y are passed as numbers and are used are pixel values (px) This limits the range of what fly can do.

This PR adds support for passing the x & y as strings that can contain CSS units:

You can create an animation that are relative:

<div class="box" in:fly={{x: '100%'}} />

'100%' is based on the width of the box.

Or based on the viewport:

<div class="modal" in:fly={{y: '50vh'}} />

Other units are also supported, we use rem a lot, currently we are calculating the px value or accept that the animation doesn't scale. With this PR we would be able to write:

<h1 class="title" in:fly={{y: '3rem'}} />

As a guideline for the regex I looked at css notation.
'100%' ✅
'100 %' ❌

If no unit is provided it falls back to using px. '50' is interpreted as '50px'

Closes #6050

Before submitting the PR, please make sure you do the following

[X] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
[X] Prefix your PR title with [feat], [fix], [chore], or [docs].
[X] This message body should clearly illustrate what problems it solves.
[X] Ideally, include a test that fails without this PR but passes with it.