@charset "UTF-8";
/* CSS Document */

#wrapper {max-width: 1200px; margin: 0 auto;}

.container {position: relative; background-color: yellow;}
.container .box {position: relative; width: 100px; height: 100px; background-color: red;}


@keyframes testAnimation {
  0% {left: 0; background-color: blue;}
  100% {left: 500px; background-color: lime;}
}


.container:hover .box {
  animation-name: testAnimation;
  animation-duration: 0.5s;
  animation-delay: 1s;   /* 음수도 가능 : -1 --> 1초 지난 시점으로 이동하여 시작, 반복 재생시 첫번째 재생시에만 적용 */
  animation-iteration-count: infinite;     /* 숫자, infinite */
  animation-direction: alternate;     /* normal(default), reverse, alternate, alternate-reverse */
  animation-timing-function: ease-in-out;     /* ease(default), linear, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n)  */
  animation-fill-mode: both;

  /* animation:  testAnimation 4s linear 1s infinite alternate; */
}




/*



*/



