CSS 로딩 애니메이션 예제 - 1

CSS 로딩 애니메이션 예제 - 1

이번만들 예제는 css의 @keyframes(키프레임)라는 애니메이션 요소를 활용해
위와 같이 로딩중에 사용 할 수 있는 로딩 애니메이션을 만들어 보자.
css keyframes의 사용법만 알고 있다면 이전 포스팅에 비해 간단한 예제고
소스 코드도 몇줄 안나온다 ㅋㅋㅋ

구현하기

먼저 로딩을 위한 html을 작성해 주자
별거 없다 엄청 간단하다 3줄 이다..
이전 포스팅에 만든 filp 애니메이션이랑 같은 원리로
원근감을 주어야 하기때문에 애니메이션시킬 요소를 한번더 감싸주었다.

<div class="flip-box">
    <div class="box"></div>
</div>

이제 flip-box의 css를 작성해 보자.
flip-box는 감싸는 요소로 원하는데로 지정해 주면된다.
나는 예제와 같게 아래와 같이 지정했다.
원근감을 줘야하기 때문에 perspective는 필수다.

.flip-box {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #141926;
    perspective: 300px;
}

대음으로 애니메이션 시킬 요소의 css를 작성해보자
예제와 같이 원하는 스타일 지정후 중앙으로 옮겨주었고
animation: flip-box 2s infinite 이라는 속성을 주었는데
flip-box는 @keyframes의 네임이고 infinite는 무한반복 시킨다는 의미다.

.flip-box .box {
    width: 100px;
    height: 100px;
    background: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: flip-box 2s infinite;
}

이제 마지막이다.

로딩 애니메이션을 위한 keyframe만 만들어 주면 끝 ㅡㅡ
아래와 같이 작성하면 되는데 눈에 띄는 것이 있다
굳이 translate(-50%, -50%)를 다시 한번더 적어준 이유는
transform 재사용시 전에 사용한 transform 스타일이 사라지게 된다.
때문에 다시 적어주어야 한다.

@keyframes flip-box {
    50% {
        transform: translate(-50%, -50%) rotateX(180deg) rotateY(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(180deg) rotateY(-180deg);
    }
}

너무 간단하다.
이제 로딩이 필요한 곳에 사용하면 된다.
다음 포스팅도 키프레임을 활용한 두번째 로딩 애니메이션이다.

- 끝 -