css @keyframes
본문
css @keyframes를 사용하여 스크롤을 내릴때
텍스트와 이미지들이 아래서 위로 스스륵 나타나는 애니메이션을 구현하려고 합니다.
wow.js , ScrollTrigger.js도 써봤는데
특정 스크립트나 js와 출동하여 오류가 많이 발생하더라구요..
@keyframes 을 사용하여 구현이 되는것까진 완료가 되었습니다.
근데 브라우져 하단에서 바로 시작을 하더라구요.
하단에서 좀 더 스크롤을 한 후 나오게 하려면 어떻게 css를 수정해야 하나요?
animation-delay:1s; 로 하니까 먼저 보이고, 애니메이션이 시작되던데...ㅠ
밑에는 현재 구현한 css입니다.
-css
@keyframes index {
from {opacity:0; }
to {opacity:1;}
}
.p {animation:index 2s;}
-html
<p>텍스트입니다.</p>
답변 2
감사합니다. 한번 적용해보겠습니다.^^
p {
animation-duration: 2s;
animation-name: index;
}
https://jsfiddle.net/freemaster/nw9x6m4c/2/
참고 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
음 전 그걸 축약해서 animation:index 2s; 요롷게 한건데..ㅠ
아 제가 잘못 이해했었네요.
답변을 작성하시기 전에 로그인 해주세요.