@starting-style can be triggered in various situations, one is when the element is first mounted onto the DOM, and the other is when the element switches the CSS declaration like display: none or HTML hidden property. However, usually we want to trigger only in one of these situations and not in the other.

The former is similar to the appear property in the <Transition> component of Vue and React Transition Group. But in many cases, we don't want it to transition while the elements appearing, but rather when switching display: none or hidden.

How about add a parameter to the @starting-style rule to control when it triggers. For example:

.foo {
	@starting-style {
		opacity: 0;
		/* Original, triggered both element mounted and switching hidden properties. */
	}

	@starting-style appear {
		translate: 0 1rem;
		/* Triggered when element mounted only. */
	}

	@starting-style enter {
		scale: 0.9;
		/* Triggered when switching hidden properties only. */
	}
}