transition

시간을 조절하여 여러가지 움직임 효과를 주는 transition 

transition은 cubic-bezier() 속성을 사용하여 움직임에 변화를 주어 좀더 다이나믹하게 화면에 움직임을 주고자 할때 사용합니다.

 

사용방법은 다음과 같습니다.

 

transition : 적용하고자 하는 속성  진행속도 지속시간  지연시간

 

  1. 적용하고자 하는 속성 

    HTML내에서 transition기능을 적용하고자 하는 속성을 지정합니다. 

 

    사용할 수 있는 속성

    - none : 모든 속성에 적용하지 않음.

    - all : 모든 속성에 적용함.

    - 속성 : 해당 속성에 적용함. 여러가지 속성에 적용하려면 콤마로 구분하여 작성.

    - initial : 기본값으로 설정함.

    - inherit : 부모 요소의 속성값을 적용함.

 

 2. 진행속도

    움직임의 속도를 지정해 줍니다.

 

    사용할 수 있는 속성

    - ease : 기본값으로 cubic-bezier(0.25, 0.1, 0.25, 1)과 동일함.

    - linear : cubic-bezier(0.25, 0.25, 0.75, 0.75)와 동일함.

    - ease-in : cubic-bezier(0.42, 0, 1, 1)과 동일함.

    - ease-out : cubic-bezier(0, 0, 0.58, 1)과 동일함.

    - ease-in-out : cubic-bezier(0.42, 0, 0.58, 1)과 동일함.

 

   여기서, cubic-bezier() 속성은 베지어 곡선을 그리는 속성으로 나무위키에서 찾아보면 다음과 같이 설명되어 있습니다.

프랑스의 공학자 피에르 베지에(Pierre Bézier)의 이름을 딴 곡선, 영어식으로 베지어 곡선으로 읽기도 한다. 2개 이상의 점으로 정의되는 매개변수 곡선이며, 점 몇 개로 곡선을 특정할 수 있는 성질 때문에 CAD, 컴퓨터 그래픽 등 컴퓨터 환경, 특히 벡터 그래픽에서 곡선을 표현하는데 널리 쓰인다.

자세히 알면 좋겠지만 저희는 움직임에 역동성을 주기위해 이를 이용하는 것이기에 사용법만 알면 될 것 같습니다.

cubic-bezier() 속성에 들어가는 숫자는 모두 0 ~ 1 사이의 값을 넣습니다.

굳이 cubic-bezier() 속성을 쓰지않고 위의 5가지 속성을 사용하여도 충분하지 않을까 생각됩니다.

하지만, 꼭 cubic-bezier() 속성을 사용하여 수치를 입력하여야 하겠다는 분은 아래 주소에서 참고하시면 좋을것 같습니다.

 

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

 3. 진행속도

    transition 속성의 진행시간을 정하는 것으로 단위로는 s(초) 또는 ms(1/1000 초)를 사용합니다. 기본값은 0s입니다.

 

 4. 지연시간

    시작할때 시간을 지연시간만큼 기다렸다가 진행합니다. 기본값과 단위는 진행속도와 동일합니다.

 

예제)

transition의 진행속도 5가지에 대해 HTML 및 CSS 파일을 작성하고 실행 비교를 해 보겠습니다.

[그림1] transition HTML 파일 내용

 

[그림2] transition CSS 파일 내용

[그림1]과 [그림2]와 같이 HTML, CSS 파일을 작성하여 실행하면 다음과 같은 결과를 얻을 수 있습니다.