infinity rotate 애니메이션 예제

안녕하세요. 루루개발자 입니다.

이번 시간에는 css 로 특정 요소를 무한 회전시키는 애니메이션 예제를 살펴보겠습니다.

 

예제 코드는 다음과 같습니다.

 

<infinity-rotate.html>

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

 

<infinity-rotate.css>

.box {
  width: 10px;
  height: 10px;
  display: flex;
  position: relative;

  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
.box > div {
  width: 5px;
  height: 5px;
  position: absolute;
}
.box > div:nth-child(1) {
  top: 0;
  left: 0;
  background-color: rgb(255, 0, 0);
}
.box > div:nth-child(2) {
  top: 0;
  right: 0;
  background-color: rgb(60, 212, 26);
}
.box > div:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: rgb(29, 112, 227);
}
.box > div:nth-child(4) {
  bottom: 0;
  right: 0;
  background-color: rgb(227, 29, 197);
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}​

 

결과는 다음과 같습니다.