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>
