CSS 애니메이션 만들기 : 통통 튀는 글자

CSS 애니메이션 : 통통 튀는 글자

오늘은 글자들이 딜레이를 두고 통통 튀는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다.

See the Pen Text animation02 by mj0614k (@mj0614k) on CodePen.

---

1. HTML 소스

<h1>
    <span>M</span>
    <span>I</span>
    <span>N</span>
    <span>J</span>
    <span>E</span>
    <span>O</span>
    <span>N</span>
    <span>G</span>
</h1>

h1 태그 안에 원하는 글자 수만큼 span 태그를 작성하고, 글자를 한 자씩 입력해 줍니다.

2. CSS 소스

html, body {
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, skyblue 0%, plum 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {
    height: 100px;
}
h1 span{
    font-family: 'serif';
    font-size: 80px;
    color: #fff;
    position: relative;
    top: 20px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 1px 0 #ccc,
                          0 2px 0 #ccc,
                          0 3px 0 #ccc,
                          0 4px 0 #ccc,
                          0 5px 0 #ccc,
                          0 6px 0 transparent,
                          0 7px 0 transparent,
                          0 8px 0 transparent,
                          0 9px 0 transparent,
                          0 10px 10px rgba(0,0,0,0.4);
    animation: bounce 0.3s ease infinite alternate;
}
h1 span:nth-child(2) {
    animation-delay: 0.1s;
}
h1 span:nth-child(3) {
    animation-delay: 0.2s;
}
h1 span:nth-child(4) {
    animation-delay: 0.3s;
}
h1 span:nth-child(5) {
    animation-delay: 0.4s;
}
h1 span:nth-child(6) {
    animation-delay: 0.5s;
}
h1 span:nth-child(7) {
    animation-delay: 0.6s;
}
h1 span:nth-child(8) {
    animation-delay: 0.7s;
}
    
@keyframes bounce {
    100% {
        top: -20px;
        text-shadow: 0 1px 0 #ccc,
                              0 2px 0 #ccc,
                              0 3px 0 #ccc,
                              0 4px 0 #ccc,
                              0 5px 0 #ccc,
                              0 6px 0 transparent,
                              0 7px 0 transparent,
                              0 8px 0 transparent,
                              0 9px 0 transparent,
                              0 50px 25px rgba(0,0,0,0.4);
    }
}

배경색은 예쁘게 그라데이션을 해 줍니다. 글자들이 가운데에 위치하도록 정렬해 주고, 그림자를 만들어 줍니다.
font-smoothing: antialiased 속성을 사용하면 글자를 부드럽게 만들어 줍니다.
keyframes를 사용하여 위치와 그림자 애니메이션을 작업해 줍니다.

위의 HTML, CSS 소스를 합치면 애니메이션이 완성됩니다. 예쁘죠?