css @keyframes 채택완료
css @keyframes를 사용하여 스크롤을 내릴때
텍스트와 이미지들이 아래서 위로 스스륵 나타나는 애니메이션을 구현하려고 합니다.
wow.js , ScrollTrigger.js도 써봤는데
특정 스크립트나 js와 출동하여 오류가 많이 발생하더라구요..
@keyframes 을 사용하여 구현이 되는것까진 완료가 되었습니다.
근데 브라우져 하단에서 바로 시작을 하더라구요.
하단에서 좀 더 스크롤을 한 후 나오게 하려면 어떻게 css를 수정해야 하나요?
animation-delay:1s; 로 하니까 먼저 보이고, 애니메이션이 시작되던데...ㅠ
밑에는 현재 구현한 css입니다.
-css
Copy
@keyframes index {
from {opacity:0; }
to {opacity:1;}
}
.p {animation:index 2s;}-html
Copy
<p>텍스트입니다.</p>답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
불량학생™
7년 전
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
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인