개발 관련 부가 지식/자바스크립트,CSS
@keyframes 로 글자 파도타기 표현
Developer-Choi
2023. 4. 10. 20:00
728x90
728x90
Admin Page를 만드는 중에 새로고침 시,
새로고침이 되었음을 표현 해주는게 좋겠다는 생각이 들어 header div에 있는 도메인 글자에 효과를 주기로 했다.
html 과 css로 만들 수 있으며, css에 @keyframes 라는 애니메이션 규칙을 통해 만들 수 있다.
HTML 작성
<div class="header-text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</div>
CSS 작성
.header-text {
display:flex;
}
.header-text span {
font-weight:1000;
animation: wave 1.5s ease-in-out;
animation-iteration-count: 1;
}
@keyframes wave {
0%, 40%, 100% {transform: translateY(0);}
20%{transform: translateY(-15px);}
60%{transform: translateY(-5px);}
}
.header-text span:nth-child(1) {animation-delay: 0.1s;}
.header-text span:nth-child(2) {animation-delay: 0.13s;}
.header-text span:nth-child(3) {animation-delay: 0.16s;}
.header-text span:nth-child(4) {animation-delay: 0.19s;}
.header-text span:nth-child(5) {animation-delay: 0.22s;}
html를 보면 각 글자를 div안에 span으로 한글자 씩 만들었다.
css를 보면 감싸는 div에는 display:flex; 를 주었고
해당 div 에 소속된 span에 일괄적으로 애니메이션을 지정하였다.
# 애니메이션 옵션들
wave -> 이 애니메이션의 키프레임 이름
1.5s -> 애니메이션이 지속되는 시간
ease-in-out -> 애니메이션 움직임 함수이며, 처음에는 느리게, 중간에는 빠르게, 마지막에는 다시 느리게 애니메이션이 실행
애니메이션 키프레임 wave를 지정하고, 마지막으로 각 span의 요소들마다 애니메이션 시작시간에 딜레이를 주어 파도타기를 구현하였다.
👏
👏