"<p>태그" 한줄씩 시차를 두고 나타나게
본문
<p>첫번째줄 텍스트</p>
<p>두번째줄 텍스트</p>
<p>세번째줄 텍스트</p>
<p>네번째줄 텍스트</p>
이렇게 있을때, <p></p> 태그 각 줄마다
한 줄씩 시차를 두고 나타나게 할 수 있는 방법이 있을까요?
관련효과 및 태그예제를 알고 싶습니다.
답변 2
<style>
.anim-txt p {
opacity: 0;
animation-name: anim-00;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.anim-txt p:nth-child(1) { animation-delay: 0.2s; }
.anim-txt p:nth-child(2) { animation-delay: 0.4s; }
.anim-txt p:nth-child(3) { animation-delay: 0.6s; }
.anim-txt p:nth-child(4) { animation-delay: 0.8s; }
@keyframes anim-00 {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<div class="anim-txt">
<p>첫번째줄 텍스트</p>
<p>두번째줄 텍스트</p>
<p>세번째줄 텍스트</p>
<p>네번째줄 텍스트</p>
</div>
<div class="anim-txt">
<p>abcd</p>
<p>efgh</p>
<p>ijkl</p>
<p>mnop</p>
</div>
<div id="div1">
<p>첫번째줄 텍스트</p>
<p>두번째줄 텍스트</p>
<p>세번째줄 텍스트</p>
<p>네번째줄 텍스트</p>
</div>
<div>end</div>
<script>
jQuery('#div1>p').hide();
setTimeout(() => {
jQuery('#div1>p:eq(0)').fadeIn('normal');
setTimeout(() => {
jQuery('#div1>p:eq(1)').fadeIn('normal');
setTimeout(() => {
jQuery('#div1>p:eq(2)').fadeIn('normal');
setTimeout(() => {
jQuery('#div1>p:eq(3)').fadeIn('normal');
}, 400);
}, 400);
}, 400);
}, 400);
</script>
답변을 작성하시기 전에 로그인 해주세요.
