CSS3 Animation 구현하는 방법 중 하나로 animation을 사용하는 방법입니다. animation은 transition과 함께 가장 많이 사용되는 애니메이션 구현 css입니다. 매우 쉽게 애니메이션을 만들 수 있으므로 중요합니다.
# CSS3 Animation 구현, animation 프로퍼티 알아보기
먼저 animation 프로퍼티를 사용하는 방법입니다.

animation: name delay times direction;  
위 코드는 아래처럼 사용됩니다.

animation: fly 0.5s 10;


fly라는 키프레임에 설정된 애니메이션을 수행합니다. 이때 속도는 0.5초이며 10번 동작을 반복하게됩니다. 만약 계속해서 반복시킬 경우 infinite을 사용합니다.
test {
  animation: fly 0.5s infinite;
}

이때 fly라는 이름은 키프레임 쿼리에 설정되어 있어야합니다. @keyframes는 아래에서 자세히 알아봅니다. 사용방법은 아래와 같이 from, to, %단위로 사용합니다.
@keyframes fly {
  from {
    left: 0px;
  }
  to {
    left: 100px;
  }
}

아래처럼 % 단위로 지정할 수 있습니다.
@keyframes fly {  0% {
    left: 0px;
  }
  50% {
    left: 100px;
  }
  100% {
    left: 200px;
  }
}

참고로 모든 브라우저 호환성을 위해서 일반적으로 아래처럼 코드가 사용되어야 할 것 입니다.
animation: fly 0.5s infinite;
-o-animation: fly 0.5s infinite;
-moz-animation: fly 0.5s infinite;
-webkit-animation: fly 0.5s infinite;

아래는 keyframes 쿼리입니다.
@keyframes fly {
  0% {}
  100% {}
}
@-o-keyframes fly {
  0% {}
  100% {}
}
@-moz-keyframes fly {
  0% {}
  100% {}
}
@-webkit-keyframes fly {
  0% {}
  100% {}
}

참고로 animation 프로퍼티는 IE의 경우 10이상부터 지원합니다.



# @keyframes를 사용한 animation 예제보기
아래 링크는 이를 사용한 예제 페이지입니다.
https://webisfree.com/2017-08-18/css3-animation으로-carousel-만들기