html and css
위로 튀는 글자, 팝업 텍스트(css - keyframes)
하이바네
2021. 5. 11. 17:03
반응형
keyframes를 활용한 애니메이션으로 글자가 하나씩 위로 팝업을 하고 되돌아오는 효과이다.
여기에서 포인트는 popup anmation의 20%지점에서 top:0px을 넣었다는 점과, animation-direction:alternate를 썼다는 것이다. alternate의 경우에는 애니메이션이 끝나면 반대로 다시 돌아가는 역할을 한다.
<head>
<title>pop text test</title>
<style>
.text-pop-link{
text-decoration:none;
}
.text-pop{
display:inline-block;
position:relative;
color:red;
animation-name:popup;
animation-duration:1.6s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
.text1{
}
.text2{
animation-delay:0.4s;
}
.text3{
animation-delay:0.8s;
}
@keyframes popup{
0%{
top:-7px;
}
20%{
top:0px;
}
100%{
top:0px;
}
}
</style>
</head>
<body>
<a class="text-pop-link" href="./">
<span class="text-pop text1">세</span>
<span class="text-pop text2">일</span>
<span class="text-pop text3">중</span>
</a>
</body>아래는 예제로 만든 구동 예시이다.
세일중 글자가 하나씩 팝업
728x90