css_to_keyframe() — svelte Function Reference

Architecture documentation for the css_to_keyframe() function in transitions.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 1 called by 1

Entity Profile

ClientRuntime→ Hydration→ css_to_keyframe() — svelte Function Reference

Dependency Diagram

graph TD
  50007ed7_a19a_bc0a_f3b9_9559a7d8d4a9["css_to_keyframe()"]
  e29c417d_6c26_6125_97f5_600e95e02dac["transitions.js"]
  50007ed7_a19a_bc0a_f3b9_9559a7d8d4a9 -->|defined in| e29c417d_6c26_6125_97f5_600e95e02dac
  df0bba2e_5fd6_624d_e576_6c964cadc587["animate()"]
  df0bba2e_5fd6_624d_e576_6c964cadc587 -->|calls| 50007ed7_a19a_bc0a_f3b9_9559a7d8d4a9
  f0ac6668_c927_7d9b_255c_d162392e1f29["css_property_to_camelcase()"]
  50007ed7_a19a_bc0a_f3b9_9559a7d8d4a9 -->|calls| f0ac6668_c927_7d9b_255c_d162392e1f29
  style 50007ed7_a19a_bc0a_f3b9_9559a7d8d4a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/transitions.js lines 51–63

function css_to_keyframe(css) {
	/** @type {Keyframe} */
	const keyframe = {};
	const parts = css.split(';');
	for (const part of parts) {
		const [property, value] = part.split(':');
		if (!property || value === undefined) break;

		const formatted_property = css_property_to_camelcase(property.trim());
		keyframe[formatted_property] = value.trim();
	}
	return keyframe;
}