css @keyframes 채택완료

css https://code.i-harness.com/ko-kr/docs/css/@keyframes" style="text-align: left; color: rgb(0, 123, 255); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-weight: 400; text-decoration: none; word-spacing: 0px; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); overflow-wrap: break-word; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px;">@keyframes를 사용하여 스크롤을 내릴때

텍스트와 이미지들이 아래서 위로 스스륵 나타나는 애니메이션을 구현하려고 합니다.

wow.js , ScrollTrigger.js도 써봤는데

특정 스크립트나 js와 출동하여 오류가 많이 발생하더라구요..

https://code.i-harness.com/ko-kr/docs/css/@keyframes" style="text-align: left; color: rgb(0, 123, 255); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-weight: 400; text-decoration: none; word-spacing: 0px; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); overflow-wrap: break-word; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px;">@keyframes 을 사용하여 구현이 되는것까진 완료가 되었습니다.

근데 브라우져 하단에서 바로 시작을 하더라구요.

하단에서 좀 더 스크롤을 한 후 나오게 하려면 어떻게 css를 수정해야 하나요?

https://code.i-harness.com/ko-kr/docs/css/animation-delay" style="text-align: left; color: rgb(0, 123, 255); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-weight: 700; text-decoration: none; word-spacing: 0px; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); overflow-wrap: break-word; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px;">animation-delay:1s; 로 하니까 먼저 보이고, 애니메이션이 시작되던데...ㅠ

밑에는 현재 구현한 css입니다.

-css

</p>

<p>@keyframes index {

from {opacity:0; }

to {opacity:1;}

}</p>

<p> </p>

<p>.p {animation:index 2s;}</p>

<p>

-html

</p>

<p><p>텍스트입니다.</p></p>

<p>