hardware-accelerated transitions

src/runtime/animate/index.ts

@@ -35,6 +35,6 @@ export function flip(node: Element, animation: { from: DOMRect; to: DOMRect }, p
 		delay,
 		duration: is_function(duration) ? duration(d) : duration,
 		easing,
-		css: (_t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);`
+		css: (_t, u) => `transform: ${transform} translate3d(${u * dx}px, ${u * dy}px, 0);`
 	};
 }

src/runtime/internal/animations.ts

@@ -98,6 +98,6 @@ export function add_transform(node: Element & ElementCSSInlineStyle, a: Position
 		const style = getComputedStyle(node);
 		const transform = style.transform === 'none' ? '' : style.transform;
 
-		node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;
+		node.style.transform = `${transform} translate3d(${a.left - b.left}px, ${a.top - b.top}px, 0)`;
 	}
 }

src/runtime/transition/index.ts

@@ -55,7 +55,7 @@ export function fly(node: Element, {
 		duration,
 		easing,
 		css: (t, u) => `
-			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			transform: ${transform} translate3d(${(1 - t) * x}px, ${(1 - t) * y}px, 0);
 			opacity: ${target_opacity - (od * u)}`
 	};
 }
@@ -203,7 +203,7 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
 			css: (t, u) => `
 				opacity: ${t * opacity};
 				transform-origin: top left;
-				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
+				transform: ${transform} translate3d(${u * dx}px,${u * dy}px,0) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
 			`
 		};
 	}