2013년 9월 28일 토요일

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


댓글 15개:

  1. 엄청난 정보입니다!! 즐겨찾기하겠습니다!!

    답글삭제
  2. css의 신세계를 보았습니다.
    Javascript 의 필요성을 줄여주는군요!!
    정말 감사합니다 (__)

    답글삭제
  3. 우와 엄청 쉽게 설명해주셨어요!

    감사합니다!!

    답글삭제
  4. 정말 쉽게 설명해주시느라 수고 많으셨습니다. 덕분에 잘 배워갑니다. 훌륭하십니다. GOOD!!

    답글삭제
  5. 블로그 운영하실만하네요...^^
    이렇게 깔끔하게 잘쓰시다니..CSS3 등장으로
    자바,제이쿼리를 이용하지않아도 멋진 애니메이션효과를만들수있다는..
    또한 어렵지않게 사용할수있는 장점도있고..ㅎㅎ잘배워갑니다.

    답글삭제
  6. 좋은 설명 고마워요! 많은 도움 얻었습니다.

    답글삭제
  7. 와우~~~
    감탄하면서 봤습니다~~ 공부가 많이 되었어요~~ 자주 들려야겠네욤~~ ㅎ ㅔㅎ ㅔ

    답글삭제
  8. 정말 잘봤습니다. 많은 도움이 됐어요

    답글삭제
  9. 진짜 많은 도움이 됐습니다~! 감사합니다~! 자주 올게요~

    답글삭제
  10. 소중한 정보 감사합니다.
    transition을 이해하는데 정말 많은 도움이 되었습니다.

    답글삭제
  11. transition뿐만 아니라 animation에도 적용되는 내용일까요?
    비슷한 내용이 많아서요

    답글삭제
  12. 何らかの理由で、多くの人々はカジノが時間を過ごすのに最適な方法であるとは考えていません。 しかし、tablegamesonline.jpのような優れたプラットフォームを使用すれば、かなりのお金を稼ぐことができるように思えます。 個人的には夕方にゲームをするのが好きで、仕事ができるのは良いアドバンテージだと思います。

    답글삭제