css, javascript, html
[css] 텍스트 애니메이션 / 아래로 스르륵 사라졌다가 위로 올라오며 텍스트가 전환되는 애니메이션
서산개백수
2023. 4. 28. 22:44
텍스트 애니메이션 CSS
- 아래로 스르륵 사라졌다가 위로 올라오며 텍스트가 전환되는 애니메이션
html
<h1 className='textStyle'>오늘은 왠지</h1>
<div className='textAniBox'>
<h1 className='textStyle textAni1'>치킨이</h1>
<h1 className='textStyle textAni2'>탕수육이</h1>
<h1 className='textStyle textAni3'>스파게티가</h1>
<h1 className='textStyle textAni4'>햄버거가</h1>
<h1 className='textStyle textAni5'>라면이</h1>
</div>
<h1 className='textStyle'>먹고싶다</h1>
css
.textStyle{
font-weight: 900;
font-size: 50px;
}
.textAniBox{
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.textAni1{
position: absolute;
opacity: 0;
animation: updown 15s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.textAni2{
position: absolute;
opacity: 0;
animation: updown 15s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.textAni3{
position: absolute;
opacity: 0;
animation: updown 15s;
animation-delay: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.textAni4{
position: absolute;
opacity: 0;
animation: updown 15s;
animation-delay: 9s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.textAni5{
position: absolute;
opacity: 0;
animation: updown 15s;
animation-delay: 12s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes updown{
0%{
opacity: 0;
transform: translate3d(0, 30%, 0);
}
5%{
opacity: 1;
transform: translateZ(0);
}
10%{
opacity: 1;
transform: translateZ(0);
}
20%{
opacity: 0;
transform: translate3d(0, 30%, 0);
}
100%{
opacity: 0;
transform: translate3d(0, 30%, 0);
}
}
아이템 갯수가 달라지면
animation: updown 뒤에 초를 바꿔주면 됨.
3 * 아이템갯수
