If we want to change the transition of the starting style, we must declare it in the regular selector. For example:

.foo {
	opacity: 1;
	transition: opacity ease-out 1s;

	@starting-style {
		opacity: 0;
	}
}

However, this will also change the subsequent transition.

.foo {
	opacity: 1;
	transition: opacity ease-out 1s;

	&:hover {
		opacity: 0.9;
	}

	@starting-style {
		opacity: 0;
	}
}

The hover state style transition duration will also become 1s, actually I don't want to be too long.

Suggestion

Can we put the transition declarations for the starting style in the @starting-style rule? This will not change the subsequent transition. For example:

.foo {
	opacity: 1;
	transition: opacity ease-out 250ms;

	&:hover {
		opacity: 0.9;
	}

	@starting-style {
		opacity: 0;
		transition: opacity ease-out 1s;
		/* or */
		transition-duration: 1s;
	}
}

At present, this declaration is invalid. The transition properties located within the @starting-style rule will be directly ignored. So we can use it.