웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS3 animation 프로퍼티를 사용한 애니메이션 구현하기

Last Modified : 2020-10-19 / Created : 2017-08-07
5,459
View Count

CSS를 사용하여 애니메이션 효과를 만드는 방법에 대하여 알아봅니다. 어떻게하면 애니메이션을 만들 수 있을까요?

CSS3에서는 Animation을 구현할 수 있도록 animation을 속성을 제공합니다. 이 CSS 속성은 웹프론트에서 animation을 구현할 때 transition과 함께 가장 많이 사용되는 애니메이션 방법입니다. 이 방법을 사용하면 매우 쉽게 애니메이션을 만들 수 있으므로 꼭 알아두어야 합니다. 그럼 아래에서 animation 속성을 어떻게 사용하는지 자세히 알아봅니다.




# CSS3 Animation 구현, animation 프로퍼티 알아보기

먼저 animation 프로퍼티를 사용하는 방법입니다.

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

animation: fly 0.5s 10;


animation은 아래의 속성들을 한 번에 적용할 수 있는 css 속성입니다.
animation-delay
animation-direction
animation-duration
animation-name
animation-fill-mode
animation-iteration-count
animation-timing-fuction
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-만들기

Previous

CSS에서 overflow hidden을 avoid, 적용하지 않는 방법은?

Previous

CSS3 animation으로 carousel 만들기