css 애니메이션 반복관련.

css 애니메이션 반복관련.

QA

css 애니메이션 반복관련.

본문

텍스트 한줄씩 순차적으로 보이다가 한꺼번에 없어지게

아래처럼 소스를 만들었습니다. (챗GPT에 물어서 간신히 도출한 소스입니다 ㅠ)

사라지고 약 5초후쯤에 다시 애니메이션이 무한 반복되도록 하고 싶습니다.

답변 부탁드립니다.

 

-------------------------------------------------------------

<div class="text-container">
  <div class="line line1">첫 번째 줄 텍스트</div>
  <div class="line line2">두 번째 줄 텍스트</div>
  <div class="line line3">세 번째 줄 텍스트</div>
</div>

<style>
.text-container { width:400px; border:#ccc solid 1px; text-align:right; padding:20px; margin:40px auto;}

.line1 {
  opacity: 0;
  animation: fadeIn1 1s ease-in-out forwards;
}
.line2 {
  opacity: 0;
  animation: fadeIn2 1s ease-in-out forwards;
  animation-delay: 1s;
}
.line3 {
  opacity: 0;
  animation: fadeIn3 1s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes fadeIn1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.line1.fadeOut, .line2.fadeOut, .line3.fadeOut {
  animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0; transform: scale(2);}
}
</style>

<script>
setTimeout(() => {
  document.querySelectorAll('.line1, .line2, .line3').forEach(el => {
    el.classList.add('fadeOut');
  });
}, 5000);
</script>

-------------------------------------------------------------

이 질문에 댓글 쓰기 :

답변 1


<style>
.text-container { width:400px; border:#ccc solid 1px; text-align:right; padding:20px; margin:40px auto;}
.line {
  opacity:0;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.line1 {animation-name: example1;}
.line2 {animation-name: example2;}
.line3 {animation-name: example3;}
@keyframes example1 {
  0%   { opacity: 0;}
  25%  { opacity: 100;}
  90%  {opacity:100}
  100%  {opacity:0}
}
@keyframes example2 {
  25%  { opacity: 0;}
  50% { opacity: 100;}
  90%  {opacity:100}
  100%  {opacity:0}
}
@keyframes example3 {
  50%  { opacity: 0;}
  75%  { opacity: 100;}
  90%  {opacity:100}
  100%  {opacity:0}
}
</style>
<div class="text-container">
  <div class="line line1">첫 번째 줄 텍스트</div>
  <div class="line line2">두 번째 줄 텍스트</div>
  <div class="line line3">세 번째 줄 텍스트</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 4

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT