@keyframes 로 글자 파도타기 표현

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의 요소들마다 애니메이션 시작시간에 딜레이를 주어 파도타기를 구현하였다.

 

새로고침 2번 한 모습

 

👏

👏