text animation

erica·2023년 1월 10일
0
<div class="txt">
	<div><h2>Special collection<br>of natural product</h2></div>
</div>
<style>
.txt {position: absolute; top: 32%; left: 46.5%; color: #555; text-transform: uppercase; overflow: hidden; padding-bottom: 10px;}
.txt > div { overflow: hidden;}
.txt > div > h2{font-size: 75px; font-weight: 700; line-height: 85px; text-shadow: 13px 5px 5px rgba(255,96,0,.13); animation: tit 1s 2s forwards; transform: translateY(100%);}
@keyframes tit {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}
</style>


css를 활용한 text animation

h2를 translateY 100% 에서 translateY 0으로 이동

0% {transform: translateY(100%);}
100% {transform: translateY(0);}

h2를 감싼 div는 overflow: hidden을 줘서 div 밖의 컨텐츠는 숨긴다.

overflow: hidden;

txt 클래스의 position: absolute; 는 없어도 될 듯한 속성같아보이는데
왜 같이 정리 해놨지??? 의문

profile
응미씨

0개의 댓글