Как сделать так, чтобы анимация css проигрывалась только после скролла на этот блок?
Вполне возможно.
1. Слушатель на скролл корневого документа
2. Внутри слушателя - проверка высоты скролла, сравнение ее с позицией блока. Если мы проскроллили больше, чем высота блока, то блок видимый (на экране)
3. Когда блок стал видимым, добавляем ему класс, на который завязана анимация
4. При необходимости, когда блок уходит за границы экрана, класс можно убрать, чтоб анимация повторялась
сейчас еще такая прикольная штука есть
https://developer.mozilla.org/ru/docs/Web/API/Inte...
несложно заскриптовать, разница в том, что не надо слушать каждый скролл, а браузер всё сделает когда надо сам