반응형
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
'html and css' 카테고리의 다른 글
| Position relative에 대해서 (0) | 2021.07.19 |
|---|---|
| input type password 안 보이는 현상 (0) | 2021.07.13 |
| Canvas wiper 구현(javascript)-1차 테스트 (1) | 2021.05.14 |
| 움직이는 차선 (css, javascript) (0) | 2021.05.11 |
| 원 움직임 애니메이션 효과 (css-keyframes) (0) | 2021.05.10 |
댓글