텍스트 애니메이션 효과 질문 드립니다.
본문
텍스트 애니메이션 효과 질문 드립니다.
아래와 같이
알아두면
쓸데없는
신비한
잡학사전
이렇게 글씨를 제일 윗줄부터 한줄씩 차례로 슬라이드 되는 효과로 보이게 하려면
어떤 효과를 활용해야 할까요?
한줄짜리 텍스트 애니메이션 효과들은 많은데, 이렇게 여러줄을 표현하는 방법은 찾기가 어렵네요.
관련 예제나 소스를 볼 수 있는 곳이 있으면 알려 주세요.
감사합니다.
답변 1
<style>
.anim-txt div {
opacity: 0;
animation-name: anim-00;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.anim-txt div:nth-child(1) { animation-delay: 0.2s; }
.anim-txt div:nth-child(2) { animation-delay: 0.4s; }
.anim-txt div:nth-child(3) { animation-delay: 0.6s; }
.anim-txt div:nth-child(4) { animation-delay: 0.8s; }
.anim-txt div::first-letter {
color: #e74c3c;
font-size: 1.3em;
font-weight: bold;
}
@keyframes anim-00 {
from { opacity: 0; margin-left: 5em; }
to { opacity: 1; margin-left: 0; }
}
</style>
<div class="anim-txt">
<div>알아두면</div>
<div>쓸데없는</div>
<div>신비한</div>
<div>잡학사전</div>
</div>
<div class="anim-txt">
<div>abcd</div>
<div>efgh</div>
<div>ijkl</div>
<div>mnop</div>
</div>
깜끔하고 멋지네요
정말 감사합니다. 많은 공부가 되었네요.
답변을 작성하시기 전에 로그인 해주세요.