[CSS] Spin animation - loading

CSS3 에서 애니메이션이라는 속성을 쓰면 플래쉬처럼 움직이는 객체를 만들 수 있다.

다음 예시는 요즘 흔히 보는 로딩화면에서 쓰이는 원형이 움직이는 애니메이션을 CSS3로 구현한 예시이다.

HTML은 다음과 같이 div 태그에 클래스명을 spinner 라고 넣어주고

CSS로 동그란 모양과 색상, 애니메이션을 입혀주면 된다.

HTML

<div class="spinner"></div>

CSS

.spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    border: 3px solid #EAEAEA;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;

    -webkit-animation:spin 1000ms infinite linear;
    -moz-animation:spin 1000ms infinite linear;
    -ms-animation:spin 1000ms infinite linear;
    animation:spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
    100%{ -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    100%{ -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
    100%{ -ms-transform: rotate(360deg); }
}
@keyframes spin {
    100%{ transform: rotate(360deg); }
}

이때 애니메이션의 기본 형은 animation, @keyframes spin 이고 

각기 다른 브라우저에서도 CSS3 애니메이션이 잘 적용되도록 하기위해 

-webkit : ios, safari, chrome

-moz : firefox

-ms : IE

-o : opera

와 같은 속성을 추가해서 사용한다.