Как сделать автоматическое transform при скроле с телефона?

Question

[SHKD]

Сейчас это работает так, при мобильной версии текст появляется после клика на блок. Как сделать этот процесс автоматом при скроле вниз.
КОД:

.content {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  transition: transform var(--d) var(--e);
	  z-index: 1;
	}

	.content {
	  transform: translateY(calc(100% - 4.5rem));
	}

	.card-border:nth-child(2) .content {
	  transform: translateY(calc(100% - 6.5rem));
	}

	.card-border:nth-child(3) .content {
	  transform: translateY(calc(100% - 6.5rem));
	}

	.card:hover .content {
	  transform: translateY(0);
	}

	.card:hover .content::after {
	  opacity: 1;
	}

	.content > *:not(.title) {
	  opacity: 0;
	  transform: translateY(1rem);
	  transition: transform var(--d) var(--e), opacity var(--d) var(--e);
	}

	.card:hover .content {
	  transform: translateY(0);
	  transform: translateY(0);
	  transition-delay: calc(var(--d) / 8);
	}

	.card:hover .content > *:not(.title) {
	  opacity: 1;
	  transform: translateY(0);
	  transition-delay: calc(var(--d) / 8);
	}

Comments

[Ankhena]

При попадании блока в область видимости: https://developer.mozilla.org/ru/docs/Web/API/Inte...
При просто скролле: ну так и пишете, выясняете позицию скролла, смещение... гуглится в общем за полминуты.