글자가 순서대로 하나씩 올라갔다가 내려오는 (UP & Down) CSS Animation

글자가 순서대로 하나씩 올라갔다가 내려오는 (UP & Down) CSS Animation

// animation 적용
.title span {
    position: relative;
    animation: animeTextUp 2s infinite;
}

// 글자 하나씩 tag로 묶여서 delay 적용
.title span:nth-of-type(1) {
    animation-delay: .1s;
}

.title span:nth-of-type(2) {
    animation-delay: .2s;
}

.title span:nth-of-type(3) {
    animation-delay: .3s;
}

.title span:nth-of-type(4) {
    animation-delay: .4s;
}

.title span:nth-of-type(5) {
    animation-delay: .5s;
}

.title span:nth-of-type(6) {
    animation-delay: .6s;
}

// animation
@keyframes animeTextUp { 
    0% { top: 0; } 
    20% { top: -10px; } 
    40% { top: 0 } 
    60% { top: 0 } 
    80% { top: 0 } 
    100% { top: 0 } 
}