[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 3

 

 

 

 

앞서 살펴본 animation의 여러 가지 속성들에 이어서 다양한 속성들에 대해서 더 알아보겠습니다. 

 

 

[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 2

 

 

 

○ animation-direction : 애니메이션의 진행 방향 지정

 

애니메이션이 진행되는 순서는, 기본적으로 keyframes에서 정의한 from에서 to로 진행됩니다. 하지만, animation-direction 속성에서 정의된 값은 이 진행 방식에 변화를 가져옵니다. 

 

animation-direction: normal | reverse | alternate | alternate-reverse

 

위와 같이 네 개의 속성 값이 있습니다. 이름에서 쉽게 예상되는 부분도 있고, 아닌 것도 있네요. 한번 각각의 특성을 살펴보겠습니다. 

 

속성	설명
normal	애니메이션을 from에서 to로 진행한다(기본).
reverse	애니메이션을 반대로 to에서 from으로 진행한다.
alternate	홀수 번째는 normal로, 짝수 번째는 reverse로 진행한다.
alternate-reverse	홀수 번째는 reverse로, 짝수 번째는 normal로 진행한다.

 

 

 

---

 

 

 

 

○ animation-iteration-count: 애니메이션의 반복 횟수 지정

 

말 그대로 애니메이션이 반복되어 재생되어야 하는 경우, 반복 횟수를 지정할 수 있습니다. 직접 횟수를 지정하거나 무한히 재생하도록 반복할 수 있습니다.

 

속성	설명
[숫자]	애니메이션의 반복 횟수를 지정한다.
infinite	애니메이션을 무한 반복한다.

 

animation-iteration-count: <숫자> | infinite

 

 

 

---

 

 

○ animation-timing-function: 애니메이션의 속도 곡선 지정

 

animation 역시 트랜지션과 마찬가지로 애니메이션의 시작 / 중간 / 끝에서 속도를 지정해 전체 속도 곡선을 만들어낼 수 있습니다. 여기서도 속성 값은 다음과 같이 사용됩니다. 

 

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

위의 속성 값들은 트랜지션에서 살펴본 transition-timing-function에서의 속성 값들과 성질이 동일합니다. 아래 아티클을 참고하시기 바랍니다. 

 

[CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 2

 

 

 

 

---

 

 

○ 애니메이션 속성 일괄 표기 : animation 속성 활용

 

지금까지 살펴본 animation 속성들을 사용하기 위해서, 일일이  속성 명과 값을 작성하는 것은 꽤나 귀찮은 작업일 것입니다. animation 속성을 사용해서 일괄 속성 값을 작성해 보겠습니다. 

 

animation: <animation-name> | <animation-duration> | <animation-timing-function>
    | <animation-delay> | <animation-iteration-count> | <animation-direction>

 

예시로 살펴보는 게 훨씬 빠르겠죠? 

 

.box {
    animation-name: move;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

 

위 예시는 아래와 같이 animation 속성으로 일괄 표현할 수 있습니다.

 

 .box { animation: move 3s alternate infinite ease-in; }

 

참고로 여기서 animation-duration 속성은 반드시 표시해야 합니다. 그렇지 않으면 기본 값이 0으로 지정되어 재생되지 않기 때문이죠. 또한, 하나의 animation 속성에서 쉼표를 이용하면 애니메이션을 두 개 이상을 지정할 수 있습니다. 

 

animation: rotate 1s infinite, backanim: 1.5s infinite alternate;