another approach

packages/svelte/src/internal/client/transitions.js

@@ -444,16 +444,23 @@ function create_transition(dom, init, direction, effect) {
 						payload.css !== undefined &&
 						/** @type {Animation} */ (animation).effect != null
 					) {
+						const transform = getComputedStyle(dom).transform;
 						const duration = payload.duration ?? 300;
 						const css_fn = payload.css;
 						const easing_fn = payload.easing || linear;
-						const keyframes = create_keyframes(easing_fn, css_fn, duration, direction, true);
-						// If we have an existing animation, we need to pause it and create a new animation
-						// with the new frames.
-						animation.pause();
-						create_animation();
+						const current_time = animation.currentTime;
+
+						const keyframes = create_keyframes(
+							easing_fn,
+							css_fn,
+							current_time,
+							direction,
+							true
+						);
+						animation.duration = current_time;
 						// @ts-ignore
 						animation.effect.setKeyframes(keyframes);
+						animation.currentTime = 0;
 					}
 					/** @type {Animation | TickAnimation} */ (animation).reverse();
 				} else {