이 게시물은 2020년 10월 21일 수정판입니다.

이야기에 앞서

본 게시물을 읽기전에 먼저 웹 애니메이션 파헤치기 기사를 읽고, 각 예제들이 여러분의 웹 브라우저에서 정확히 표현될 수 있도록 미리 준비해 주시기 바랍니다.

Transition

transition 속성은 그 자체로도 애니메이션 효과를 가지고는 있지만, animation 속성보다는 제한적인 기능을 가지고 있습니다. 그래서, 하나의 줄거리를 이루기 위한 애니메이션 보다는, 특정 객체를 부각시키는 인스턴트적인 상황이나 화면 전환에 더 적합합니다. 예를들어, 객체의 모양을 왜곡시킨다던가 혹은, 같은 동작을 무한 반복시키는 기능(Film Loop)은 없습니다.

트랜지션은 객체가 기존에 가지고 있던 속성의 값이 다른 값으로 변할 때만 표현됩니다.

.ex-01 {
    display: inline-block;
    margin: 0;
    padding: 20px;
    text-decoration: none;
    font-size: 12px;
    color: white;
    background-color: black;
    transition: all 1s;
}

.ex-01:hover {
    padding: 30px;
    color: yellow;    
    background-color: red;
}

위 예제는 <a> 객체에 마우스가 올라가면, padding, color, background-color 속성이 바뀌면서 자연스럽게 애니메이션으로 표현되는 것을 보여줍니다. 이처럼, 이전 속성에서 다음 속성으로 변하는 애니메이션을 사용할 때 transtion을 사용합니다.

지금은 예제에 나온 문법을 너무 이해하려고 애쓰지 않아도 좋습니다. 쭉 읽어 내려가면서 개념을 짚어 나가고, 이 글의 마지막즈음에 종합적인 예제 1개를 제대로 분석해 보면 transition은 끝납니다.

발동 조건

transition은 페이지가 로드되면서 자동으로 시작되지 않습니다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 혹은, 자바스크립트의 onclick 이벤트 따위의 부수적인 액션에 의해 발동합니다. 예제 1을 보면 쉽게 알 수 있습니다. .ex-01이라는 클래스에 transition: all 1s 코드가 들어갔지만, 이것만으로는 아무런 효과도 볼 수 없습니다.

반드시 .ex-01:hover처럼 마우스가 올라갔을 때 어떤 속성들이 변할 것인지 정의해 주어야 합니다.

CSS 구문

트랜지션 속성은 background 속성처럼 여러 속성을 한꺼번에 단축하여 기재할 수도 있고, 속성별로 모두 나눠서 사용할 수도 있습니다.

최대 단축형

transiton의 속성과 값을 최대로 간단하게 작성할 때는 다음과 같이 할 수 있습니다. 아래 코드와 이미지를 함께 보면서 속성과 값이 어떻게 대입되는지 이해하세요.

div { transition: property duration timing-function delay; }

이 방법은, 변경할 속성이 1개이거나 혹은 변경될 속성이 아주 많은 경우, 즉, 모 아니면 도인 경우에 사용할 수 있습니다. property 부분에서는 변경할 속성의 이름(width나 color 따위)를 적어주게 되는데, 여러 개 나열해서 적을 수 없고 딱 1개만 적을 수 있습니다. 따라서 1개의 속성 이름만 적어주든지, 아니면 all을 써서, 모든 속성을 변경시키는 값을 써야합니다.

확장 단축형

이것은 최대 단축형보다는 조금 더 유연한 작성방식입니다.

div {
    transition: background 2s ease 1s,
                padding 1s linear 2s;
}

변경할 속성이 2개 이상이면 위와 같은 방식으로 사용할 수 있습니다. 여기서는 background와 padding, 이 2개의 속성을 각각 정의했습니다. 이 방식의 장점은, 각 속성별로 지연시간이나 다른 값을 따로 두어 독립적인 움직임을 줄 수 있습니다.

반면, 변경할 속성은 많은데, 그 외에 사용하는 값들은 대체적으로 공통된 경우, 동일한 값을 계속 써주는 비능률적인 상황이 발생할 수 있습니다.

단축시킨 속성을 2개 이상 나열할 때에는 반드시 쉼표(,)로 구분해야 합니다. 예문을 잘 보고 쉼표가 어디 찍혔는지 유의깊게 보시기 바랍니다.

기본형

아래와 같이 속성을 분리시켜서 정의할 수도 있습니다. transition 효과를 입히고자 하는 속성을 원하는 만큼 정의할 수 있는 장점이 있는 반면, 그 외에 지속시간, 타이밍 등의 다른 속성들도 긴 속성명과 함께 기재해야 하기 때문에 다소 코드의 양이 많아질 수 있습니다. 물론 기본 값 그대로 사용할 속성들은 굳이 정의하지 않아도 됩니다.

div {
    transition-property: width, color;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 3s;
}

아래 표에서는, transition을 기본형으로 작성할 때 사용하는 속성 이름과 값을 다시 한번 정리하였습니다.

대입형

기본형을 확장한 형태입니다. transition-property에 나열된 속성의 순서대로 다른 transition 속성이 대입됩니다. 예를들어, 아래의 예문에서 width는 transition-property의 가장 처음에 명시되어 있는데, 다른 속성들의 첫 값들이 여기에 대입되어 결과적으로 width는 1초의 지속시간, ease 값을 갖는 타이밍, 그리고 3초의 지연시간을 갖게 됩니다.

div {
    transition-property: width, height, border-width, color;
    transition-duration: 1s, 2s, 1s, 3s;
    transition-timing-function: ease ease-in ease-out linear;
    transition-delay: 3s, 1s, 1s, 2s;
}

타이밍

타이밍(Timing)은 애니메이션이라는 포괄적인 개념에서 아주 큰 비중을 차지하는 요소입니다. 모든 사물의 움직임은 무조건적으로 느려짐과 빨라짐이 존재하며, 이러한 타이밍이 부재된 움직임은 현실적으로 느껴지지 않습니다. 타이밍이 없는 움직임은 오로지 컴퓨터나 기계가 만들어 낸 영상에 한정됩니다.

따라서, transition 속성 중에서도 타이밍 부분의 중요성이 있기 때문에 여기서 잠시 다루고 넘어갑니다. transition에서 타이밍을 정의하는 속성은 transiton-timing-function입니다. 이 속성이 가지는 값들을 보세요.

Transtion에서의 타이밍은, After Effects나 3D 애니메이션 툴에서 사용하는 타이밍의 개념과 다릅니다. Transition에서의 Ease-In은 무조건 느리게 시작, Ease-Out은 무조건 느리게 끝입니다.

종합 예제

이제 예제를 통해 종합적인 사용방법 및 앞에서 다 설명하지 못한 소소한 부분들에 대해 점검하면 됩니다. 아래 예제 2에서 볼 부분은 15번 부터 22번 줄까지 입니다. 그 외에는 그냥 모양새를 잡기 위한 코드입니다.

.ex-02 {
    display: inline-block;
    margin: 0;
    width: 80px;
    height: 80px;
    line-height:80px;
    text-decoration: none;
    font-size: 12px;
    color: #999;
    background-color: #f4f4f4;
    border-width: 1px;
    border-style: solid;
    border-radius: 10%;
    border-color:#999;
    transition: width .2s ease,
				height .2s ease,
				line-height .2s ease,
				color .2s ease,
				font-size .2s ease,
				border .2s ease,
				background-color .2s ease,
				border-radius .2s ease .4s;
}

.ex-02:hover {
    width: 120px;
    height: 120px;
    line-height:120px;
    color: #ffcccc;
    font-size: 20px;
    border-width: 5px;
    border-color:#ff5e5d;
    background-color: #fa8382;
    border-radius: 50%;
}

이 예제에서는 확장 단축형을 사용했으며, 객체에 마우스가 올라 갔을 때 width, height, line-height, color, font-size, border, background-color, border-radius 속성이 변화하도록 하였습니다.

생략이 가능한 것들

15번 줄의 width .2s ease를 살펴봅니다. 변경 할 속성 값으로 너비(width)를 정의했고, 그 다음에는 효과 지속시간 .2s를 정의했습니다. .2s는 0.2s와 똑같이 간주됩니다. 소숫점 앞자리가 0일때는 생략해서 쓸 수도 있음을 보여주는 예시입니다. 그리고 .2s는 0.2초를 뜻합니다.

그리고나서 타이밍 값인 ease를 정의해서 움직임의 처음과 끝을 느리게 하여 자연스러움을 주었으며, 맨 마지막에 위치할 지연시간 값은 생략했습니다. 지연시간을 생략하면 지연시간의 기본 값인 0이 적용됩니다. 아무런 지연 없이 마우스가 올라가면 곧바로 효과가 발동합니다.

그리고 width 이외에 다른 속성들도 계속 정의하기 위해 현재 줄의 맨 마지막에는 쉼표(,)를 넣었습니다. 이후부터는 모두 이런 형식으로 작성되었으니 이해하는데 어렵지 않을 겁니다.

단축 표기가 가능한 속성을 묶어서 정의하기

예문에서 31번과 32번 줄을 봅시다. 마우스가 올라갔을 때의 .ex-02:hover 클래스는 border-width와 border-color 2개의 속성이 변화되게끔 정의되어 있는데, 정작 20번 줄에서는 border 속성 1개만 정의했습니다. 원래대로라면 2개 모두 따로따로 적어주어야 하는데 말이죠.

border 속성은 본래 border-width, border-style, border-color 등 테두리에 관련된 속성들을 한꺼번에 묶어 호출하는 그룹 속성입니다. 따라서 transition에서 border 1개만 정의하면, 그룹에 속한 모든 파생 속성들까지 모두 정의합니다. 이렇게 사용하는 방식이 있다는 정도로 이해하면 됩니다.

border-radius는 border 속성에 그룹화 되지 않은 독립적인 속성입니다. 얼핏보면 앞에 border라는 글자가 들어가서 착각할 수 있는데, 완전히 별개의 속성이므로 transition에서 정의 할 때에도 별개로 해주어야 합니다.

지연시간으로 시간차 애니메이션 주기

예문에서 대부분의 transiton 속성에서 지연시간(Delay) 값을 생략했습니다. 그래서 0.2초 안에 대부분의 효과가 나타납니다. 하지만 22번 줄에서는 지연시간 값을 .4s로 정의했습니다. 따라서 이 부분은 마우스가 올라간 순간부터 0.4초 후에 발동합니다.

실제로 샘플에 마우스를 올려보면 테두리를 곡선으로 만들어주는 border-radius 속성만 0.4초 후에 나타나는 것을 볼 수 있습니다. 지연시간을 사용하면 이런 방식으로 애니메이션에 시간적인 흐름을 줄 수 있습니다. 다만 transition 은 한번 정의된 속성을 다시 재정의 할 수 없기 때문에 비교적 효과는 미비합니다.

각종 이슈들

transition은 CSS3부터 새로 생긴 명세입니다. 따라서 웹 브라우저마다 지원사항이 다르고, 표현에 대한 부분에서도 몇 가지 문제점을 가지고 있습니다. 따라서 이 기능을 웹 사이트 작동에 지대한 영향을 끼치는 코어 액션에 사용하는 것은 안전하지 않습니다. 지금은 키 포인트로 주위 환기를 줄 수 있는 정도로 활용하는 것이 좋습니다.

아래에서 몇 가지 이슈들에 대해 다루고 있으니 살펴보시기 바랍니다.

웹 브라우저 호환성

지원	10	지원	-webkit-	지원

• 인터넷 익스플로러 9 이하 버전에서는 표현하지 못합니다. 따라서, 처음부터 형체가 없다가 나타나는 효과는 아예 화면상에 아무것도 나타내지 못하므로 주의해야 합니다. 예를들면, 투명도를 0으로 하거나 너비, 높이를 0으로 시작하는 애니메이션 따위.
• Apple Safari의 경우는 제조사별 프레픽스를 붙여 -webkit-transition: width 2s ease;와 같이 사용해야 합니다.