Как мне отложить анимацию CSS до тех пор, пока я не прокрутлю элемент до элемента в React? ⇐ Jquery

[Гость]

Я создал подобную анимацию и теперь хочу гарантировать, что она будет воспроизводиться только тогда, когда пользователь прокрутит до определенного места, чтобы анимируемый контент действительно был виден. Как мне это сделать внутри приложения React?
Я пытался изучить проблему, но большинство решений указывают либо на jQuery, либо на Animate.css, либо на waypoint js.
[*]Есть ли способ сделать это, не используя ничего из этого? [*]Как React и jQuery работают вместе, не вызывая конфликтов? (Я спрашиваю, потому что я также использую React-Bootstrap, и они прямо заявляют, что создали его с нуля, чтобы избежать использования jQuery с React.) Где мне вообще писать код jQuery?
body{ семейство шрифтов: Helvetica, Arial, без засечек; } .контейнер{ ширина: 50%; маржа: 0 авто; } @keyframes загружается{ от { ширина: 0% } } @-webkit-keyframes загрузить{ от { ширина: 0% } } @-moz-keyframes загрузить{ от { ширина: 0% } } @-o-keyframes загрузить{ от { ширина: 0% } } .бар{ цвет фона: #EEE; отступ: 2 пикселя; радиус границы: 15 пикселей; поле внизу: 5 пикселей; размер шрифта: 14 пикселей; цвет: #FFF; начертание шрифта: жирный; текстовая тень: 1px 1px 1px rgba(0,0,0,0.5); } .бар::перед{ содержимое: attr(навык данных); цвет фона: #f3b0ff; отображение: встроенный блок; отступ: 5 пикселей 0 5 пикселей 10 пикселей; граница-радиус: наследовать; анимация: загрузка 2с 0с; -webkit-animation: загрузка 2 с 0 с; -moz-анимация: загрузка 2с 0с; -o-анимация: загрузка 2с 0с; } .bar.front::before{ цвет фона: #ffcc33; } .bar.back::before{ цвет фона: #a6cfe3; } .bar.learning::before{ ширина: расчет (20% — 10 пикселей); } .bar.basic::before{ ширина: расчет (40% — 10 пикселей); } .bar.intermediate::before{ ширина: расчет (60 % – 10 пикселей); } .bar.advanced::before{ ширина: расчет (80 % – 10 пикселей); } .bar.expert::before{ ширина: расчет (100 % – 10 пикселей); Набор навыков