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

 

 

 

앞서서 animation 속성에 대해서 기초적인 개념을 살펴보았습니다. @keyframes 개념이 있다 보니, 사용법이 헷갈릴 수도 있으니 잘 상기하시기 바랍니다. 

 

 

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

 

그럼 앞선 아티클에서 다루었던 속성의 개념들을 상세하게 하나씩 살펴보도록 하겠습니다. 

 

 

 

---

 

 

○ 애니메이션의 지점과 이름을 정의하는 @keyframes

 

우리는 이전 아티클에서 box라는 요소에 애니메이션을 적용할 때 box 요소 안의 속성에는 애니메이션 이름과 재생 시간을 선언한다고 했습니다. 그리고 여기서 적용되는 애니메이션의 이름과 구체적인 지점과 동작을 정의하는 것은 @keyframes라고 했습니다. 

 

@keyframes의 기본 형태는 아래와 같습니다. 

 

@keyframes <이름> {
    <선택자> { 
        <스타일 정의> 
    }
}

/* 예시 */

@keyframes shape {
    from { border: 1px solid transparent; }
    to { 
        border: 1px solid #000;
        border-radius: 50%;
}

 

위의 예시처럼 애니메이션의 이름을 선언하고, 선택자를 사용해서 지점을 정의할 수 있습니다. 위와 같이 시작과 끝 지점에 대해서만 간단하게 정의할 경우 from / to를 사용합니다. 혹은 '중간 지점'에 애니메이션을 추가한다고 가정하면 시작은 0%, 끝은 100%로 가정하고 50% 지점에 키프레임을 추가하는 방식으로 지점을 정의할 수 있습니다. 

 

 

 

○ animation-name

 

이렇게 정의된 애니메이션을 특정 요소에서 사용하도록 정의할 때는 animation-name 속성을 사용하게 됩니다. @keyframes로 정의된 애니메이션 이름을 선언해 주면 됩니다.

 

animation-name: <키프레임 이름> | none

 

 

○ animation-duration

 

이 속성은 animation-name으로 사용하도록 선언한 애니메이션을 얼마의 시간동안 재생할 것인지를 정의하게 됩니다. 만일 위에서 정의한 animation-name이 shape일 때, shape가 @keyframes로 정의한 애니메이션 내용을 몇 초의 시간 동안 재생을 완료할 것인지를 정의하게 되는 것이죠.

 

animation-duration: <시간>

 

참고로 3s, 혹은 5000ms와 같이 초 또는 밀리 초를 단위로 사용할 수 있으며, 디폴트 값은 0이므로 작성하지 않으면 실행이 되지 않습니다.