Transition behavior

Overview of the feature

The transition-behavior property lets you control how discrete transitions behave. It defines when the change for discrete properties occurs during the transition:

  • normal: default behavior — the change happens instantly at the start or end.
  • allow-discrete: allows certain discrete properties to participate in transitions by controlling when their value flips (e.g., at the start, end, or somewhere in between), ensuring you have more control over the change only using CSS features.

Discrete transitions

Discrete transitions refer to transitions between property values that cannot be smoothly interpolated — in other words, they “jump” from one value to another at a specific point in time rather than gradually changing. The properties that can be discretely transitioned in Gameface are display, visibility, content, cursor and pointer-events.

Example usage 

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
	div {
		width: 40px;
		height: 40px;
		background-color: blue;
		opacity: 1;
		transition: background-color 4s ease,
			display 4s ease,
			opacity 4s ease;
		transition-behavior: allow-discrete;
	}

	.exit {
		background-color: red;
		display: none;
		opacity: 0;
	}

	@starting-style {
		div {
			background-color: red;
			opacity: 0;
		}
	}
</style>

<body>
	<div></div>
	<script>
		const div = document.querySelector("div");
		div.addEventListener("transitionend", () => {
			div.classList.add("exit");
		});
	</script>
</body>
</html>

The example above demonstrates an entry transition using @starting-style, followed immediately by an exit transition. This creates a seamless fade-in/fade-out effect.

← Tailwind support
Type Script →