@keyframes

해당 포스팅에서는 animation 속성을 이용해서 로딩 애니메이션을 만들어 보고자 한다.

주요 CSS 속성 : keyframes, animation, nth-child, flex, transform, opacity

index.html

1. span tag 3개를 감싸고 있는 div tag를 만든다.

<div class="loading">
  <span></span>
  <span></span>
  <span></span>
</div>

style.css

2. animation으로 불러 올 keyframe을 만든다.

@keyframes loading {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

3. 만든 keyframe을 animation으로 불러온다.

.loading {}
.loading span {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
    animation: loading 1s linear infinite;
}

4. 각각의 span 태그에 배경 색을 입히고, delay를 각각 다르게 설정한다.

.loading span:nth-child(1) {
    animation-delay: 0s;
    background-color: crimson;
}
.loading span:nth-child(2) {
    animation-delay: 0.3s;
    background-color: dodgerblue;

}
.loading span:nth-child(3) {
    animation-delay: 0.5s;
    background-color: royalblue;
}

결과물