CSS transition 이해하기

! 이 글의 예문에 적용된 transition 효과는 익스플로러 9 버젼 이하에서는 작동하지 않습니다.

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition은 위 4가지 속성의 축약 속성(shorthand property)이다. 영어로 shorthand property 라고 지칭하니, 함축속성, 또는 대표속성이라고도 표현할 수 있을 것이다. 쉽게 말하면, transition 하나로 위 4가지를 다 표현할 수 있다는 얘기다.

예를 들어,

 transition-property:width;  
 transition-duration: 1s;  
 transition-timing-function: ease;  
 transition-delay: .5s;  

 transition: width 1s ease .5s;  

위 두개의 코드는 서로 같은 코드이다.

transition-property

transition 구문의 첫번째 자리에 오는 transition-property 는 어떤 속성에 transition 효과를 줄지를 설정한다.

transition-property의 값(value)

• none : transition 효과를 지정하지 않는다.
• all : 모든 속성이 transition 효과를 얻는다.
• property : transition 효과를 얻게될 속성을 지정한다.

모든(all) 속성을 지정하는 것과 일부 속성을 지정하는 것은 다음과 같은 차이가 있다.

  예1

 .transitionpost1 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:all 1s ease .1s;   
 }  
   
 .transitionpost1:hover {  
 width: 300px;  
 height:100px;  
 }  

<예1>에서는 transition-property를 all 로 설정했기 때문에, 너비 확장과 높이 확장 모두 transition 효과를 얻는다. 즉, 너비 확장과 높이 확장 모두 시간에 걸쳐 점진적으로 이루어진다.

  예2

 .transitionpost2 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 1s ease .1s;   
 }  
   
 .transitionpost2:hover {  
 width: 300px;  
 height:100px;  
 }  

<예2>는 다른 조건들을 <예1>과 동일하게 하되, transition-property를 all 이 아닌 width로 설정했다. <예2>의 도형은 마우스 커서를 올렸을 때 똑같이 너비 300px, 높이 100px로 확장하지만, 높이 변화는 transition의 효과를 얻지 못한다.


복수의 속성을 지정할 때는 콤마로 구분하여 각각의 값을 설정한다.

  예3

예3 - 너비 변화는 1초, 배경색상 변화는 13초에 걸쳐 일어난다.
transition 속성을 지정하지 않은 height(높이)는 변화는 하되, 점진적으로 변화하는 transition 효과는 얻지 못한다.

 .transitionpost3 {  
 width: 100px;  
 height: 50px;  
 background-color:#8FBC8F;  
 border:1px solid black;  
 transition:width 1s ease, background-color 13s ease;  
 }  
   
 .transitionpost3:hover {  
 width: 300px;  
 height: 100px;
 background-color:#000000;  
 }  

transition-duration

transition 구문의 두번째 자리에 오는 transition-duration은 변화가 몇초, 또는 몇 밀리세컨드(1/1000초)에 걸쳐 일어날지를 설정한다. 6s, 0.5s, .3s, 120ms 이라고 적혀 있다면, 이는 각각 6초, 0.5초, 0.3초, 120밀리세컨드 라는 뜻이다.

  예4

예4 - 너비 변화는 11초, 높이 변화는 432ms(밀리세컨드), 배경색상 변화는 0.3초에 걸쳐 일어난다.

 .transitionpost4 {  
 width: 100px;  
 height: 50px;  
 background-color:#8FBC8F;  
 border:1px solid black;  
 transition:width 11s ease, height 432ms ease, background-color .3s ease;  
 }  
   
 .transitionpost4:hover {  
 width: 300px;  
 height:100px;  
 background-color:#2580a2;  
 }  

transition-timing-fuction

transition 구문의 세번째 자리에 오는 transition-timing-functing은 변화가 일어나는 속도를 설정한다. 속도 커브의 함수를 설정한다는 것이 더 정확한 표현이겠지만, 어려운 말 보다는 실제 움직임을 보면서 이해하는 것이 편하다.

transition-timing-function의 값(value)으로는

  linear

transition-timing-function을 linear로 설정하면 변화가 시작부터 종료까지 동일한 속도로 일어난다.

  ease

ease는 극초반은 느리게, 초반은 빠르게, 종료지점은 느리게 변화가 진행된다.

  ease-in

ease-in은 시작지점의 변화가 천천히 진행된다.

  ease-out

ease-out은 종료지점의 변화가 천천히 진행된다.

  ease-in-out

ease-in-out은 시작지점과 종료지점의 변화가 천천히 진행된다.

주로 쓰이는 5가지 외에 함수 값을 직접 지정하는 cubic-bezier,

  cubic-bezier(1,.02,1,.47)

그리고, 변화가 점진적으로 진행되지 않고, 주어진 설정과 간격에 따라 일시에 진행되는 step-start, step-end, steps 가 있다.

  step-start

step-start는 모든 변화가 시작지점에 이루어진다.

  step-end

step-end는 모든 변화가 종료지점에 이루어진다.
("transition:width 2s step-end;" 로 설정하였으므로, 마우스 오버 후 2초 뒤에 변화가 일어난다.)

  steps(4, start)

steps는 설정한 단계에 따라 간격을 두고 변화가 일어난다.

주로 쓰이는 것은 linear, ease, ease-in, ease-out, ease-in-out 이렇게 5가지이다. 이 5가지만 알고 있어도 transition을 활용하는데에는 큰 무리가 없다.

cubic-bezier로 함수 값을 직접 지정하려면, cubic-bezier 곡선 그래프를 이해해야 한다. cubic-bezier 곡선 그래프를 이해하는 것은 나머지 값들이 어떻게 다른지를 이해하는데에도 도움이 된다.

그림1

cubic-bezier 곡선에서 그래프의 가로축은 시간, 세로축은 변화의 진행 정도를 의미한다. 가로축과 세로축 모두 시작값은 0이며, 종료값은 1이다.

그림2

예를 들어, linear의 cubic-bezier 곡선은 <그림2>와 같은 모습을 하고 있다. transition-timing-function을 linear로 설정할 때 변화가 시작부터 종료까지 동일한 속도로 일어나는 것은 linear의 그래프가 시간이 흐른 만큼 변화가 동일한 비율로 일어나는 직선의 모습을 하고 있기 때문이다.

그림3

ease-in-out의 경우 시작지점과 종료지점의 변화는 시간 진행에 비해 더디게 진행되는 곡선의 모습을 하고 있다. ease-in-out으로 설정할 때 시작지점과 종료지점의 변화가 천천히 진행되는 이유는 이와 같은 이유 때문이다.

linear나 ease-in-out, ease, ease-in, ease-out 처럼 주어진 값(곡선)이 아닌, 자신이 원하는 함수(곡선)를 설정하고자 할 때 transition-timing-function의 값으로 cubic-bezier를 설정한다.

cubic-bezier(x1, y1, x2, y2)

! cubic-bezier 숫자값 지정시 x1과 x2의 값은 0과 1 사이여야 한다. y1과 y2는 0~1 범위를 초과할 수 있다.

cubic-bezier를 설정할 때 괄호안 4개의 숫자는 곡선을 함수로 나타낸 것이다. 원하는 함수값과 곡선을 얻을 수 있도록 도와주는 사이트가 많이 있으므로, 해당 사이트에서 원하는 곡선 모양을 만든 후 함수값을 추출하면 된다.

! 참고.
cubic-bezier.com
CSS cubic-bezier Builder - Rob La Placa

그림4

만약 <그림4>와 같은 곡선을 함수값으로 지정하면 어떻게 되는가. <그림4>의 곡선을 함수값으로 설정하면, 실제로 변화가 진행되다가 마이너스 변화 과정을 겪은 후 다시 변화가 진행된다.

  예5

 .transitionpost5 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s cubic-bezier(0,1.59,1,-0.75);  
 }  

 .transitionpost5:hover {  
 width: 300px;  
 }  

그림5

step-start의 cubic-bezier 그래프는 <그림5>와 같으며, step-start는 steps(1,start)와 같다. step-start는 시작 지점에서 모든 변화가 완료된다.

그림6

step-end의 cubic-bezier 그래프는 <그림6>과 같으며, step-start는 steps(1,end)와 같다. step-start는 종료 지점에서 모든 변화가 완료된다.

그림7

steps는 step-start, step-end와 같은 개념이되, 단계(간격)를 지정할 수 있다. 각 단계의 시작 지점에서 변화가 일어날지, 아니면 종료 지점에서 변화가 일어날지는 변수(start, 또는 end)로 설정한다.

steps(단계, start), 또는 steps(단계, end)

  예6

예6 - 너비 변화가 2초 동안 8단계를 거쳐 각 단계의 종료 시점에 일어난다.

 .transitionpost6 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s steps(8, end);  
 }  
   
 .transitionpost6:hover {  
 width: 300px;  
 }  

steps의 두번째 변수(start, 또는 end)는 생략이 가능하다. 두번째 변수를 생략하면, default값인 end 값이 주어진다.

  예7

 .transitionpost7 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s steps(7);  
 }  
   
 .transitionpost7:hover {  
 width: 300px;  
 }  

! 참고 - linear, ease, ease-in, ease-out, ease-in-out 의 cubic bezier 그래프

그림8

transition-delay

transition 구문의 마지막 네번째 자리에 오는 transition-delay 는 transition 효과가 언제 시작할지를 설정한다. 말 그대로, 딜레이(delay)를 설정한다.

  예8

예8 - 마우스 커서를 올리면 1초가 지난 후 2초에 걸쳐 너비가 확장된다.

 .transitionpost8 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:width 2s ease-in 1s;  
 }  
   
 .transitionpost8:hover {  
 width: 300px;  
 }  

transition의 default 값

transition의 default 값은

all 0 ease 0

이다.

transition 구문에서 생략된 값은 default 값으로 대체된다. transition 효과가 나타나기 위해서 반드시 주어져야 하는 값, 즉 생략해선 안되는 값은 transition-duration 이다. 0초에 걸친 점진적인 변화라는 것은 있을 수 없기 때문이다.

  예9

 .transitionpost9 {  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:2s;  
 }  
   
 .transitionpost9:hover {  
 width: 300px;  
 }  

<예9>에서는 transition의 값으로 '2s'만 입력했다. 생략된 값은 default 값으로 대체되므로,

 transition:2s;  

는

 transition:all 2s ease 0;  

과 같다.


transition 효과를 얻을 수 있는 속성들(properties)

꼭 그렇다고는 할 수 없지만, 보통 숫자값을 갖는 속성(property)들은 transition을 통해 점진적인 효과를 낼 수 있다.

예 : opacity, border-radius, margin, color, font-size, padding 등등

transition 효과가 가능한 속성(property)의 목록은

http://www.w3.org/TR/css3-transitions/

페이지 하단의 7.1. Properties from CSS 에 열거된 항목. 또는,

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

페이지에서 animatable이 yes인 항목들을 통해 확인할 수 있다.

! 브라우저마다 약간씩 다르고, 또 이 항목들은 바뀔 수 있으므로 웹 사이트나 블로그 설계 시 주의를 기울여야 한다.

  예10

 .transitionpost10 {  
 opacity:1;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:opacity .5s ease-in;  
 }  
   
 .transitionpost10:hover {  
 opacity:0;  
 }  

  예11

 .transitionpost11 {  
 border-radius:0;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:border-radius .5s ease-in-out;  
 }  
   
 .transitionpost11:hover {  
 border-radius:50%;  
 }  
   

  예12

 .transitionpost12 {  
 margin-left:0;  
 width: 100px;  
 height: 50px;  
 background-color:DarkSeaGreen;  
 border:1px solid black;  
 transition:margin-left 1.5s ease-in-out;  
 }  
   
 .transitionpost12:hover {  
 margin-left:200px;  
 }  

예13

긴 글 읽느라 고생하셨습니다.
감사합니다. :D

! 참고한 글 및 참고할 만한 글
W3C CSS Transitions
Mozilla Developer Network, timing-function
Mozilla Developer Network, Using CSS transitions
CSS-Tricks, transition-timing-function
w3schools.com, CSS3 transitions
w3schools.com, CSS3 transition-property Property
w3schools.com, CSS3 transition-duration Property
w3schools.com, CSS3 transition-timing-function Property
w3schools.com, CSS3 transition-delay Property