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-fuctionfly라는 키프레임에 설정된 애니메이션을 수행합니다. 이때 속도는 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-만들기