<!-- 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. -->
<h3>keyframes 1 : spin</h3>
<div class="hover-moving-box b01">
  <!--  2. box는 캐릭터 이미지를 담고 있는 상자입니다.  -->
  <div class="box">
    <!--  3. 이미지를 불러옵니다.   -->
    <img src="http://report.stibee.com/images/report2016/main-ufo@2x.png" width="471">
  </div>
</div>

<h3>keyframes 2 : left & right</h3>
<div class="hover-moving-box b02">
  <div class="box">
    <img src="http://report.stibee.com/images/report2016/main-ufo@2x.png" width="471">
  </div>
</div>


<h3>keyframes 3 : show & hide</h3>
<div class="hover-moving-box b03">
  <div class="box">
    <img src="http://report.stibee.com/images/report2016/main-ufo@2x.png" width="471">
  </div>
</div>

/* 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. */
.hover-moving-box {
  width:100%;
  height:400px;
  position:relative;
  background: #4c6ef5;
}

/* 2. box는 캐릭터 이미지를 담고 있는 상자입니다. */
/* 3. 이 상자에는 transition이라는 속성이 설정되어 있습니다. */
.hover-moving-box .box {
  color:#fff;
  text-align:center;
  position: absolute;
  top:40px;
  left:5%;
  transition: all 2s ease;
}

.hover-moving-box .box img {
  width:400px;
  height:auto;
}

@keyframes spin {
    from {
      transform:rotate(0deg);
    }
    to {
      transform:rotate(360deg);
    }
}

@keyframes leftAndRight {
    0% {
      transform:translate(0,0);  
    }
    50% {
      transform:translate(70%,0);  
    }
    0% {
      transform:translate(0,0);  
    }
}

@keyframes hideAndShow {
    0% {
      opacity:1;  
    }
    50% {
      opacity:0;
    }
    0% {
      opacity:1;
    }
}

/*  */
.b01 .box {  
  animation: spin 8s infinite linear;
}

.b02 .box {  
  animation: leftAndRight 4s infinite ease;
}

.b03 .box {  
  animation: hideAndShow 4s infinite linear;
}