Transition - by. UXKM electrocardiogram

2024-07-30

요약 설명
transition CSS 속성은 transition-property, transition-duration, transition-timing-function, transition-delay를 위한 단축 속성입니다.
이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다.
transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다.

transition은 간단한 인스턴트 적인 동작을 구현하는 용도로 적합합니다.
transition은 페이지가 로드되면서 자동으로 시작되지 않으며, 반드시 click, hover, focus등의 이벤트가 발생해야만 작동됩니다.

transition-property 속성

트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다.
transition 효과를 적용할 속성들을 나열, 2개 이상일 경우는 쉼표(,)로 구분합니다.
CSS의 모든 속성에 적용(all)할 경우 생략 가능합니다.

보통 숫자값을 갖는 속성(property)들은 transition을 통해 점진적인 효과를 낼 수 있습니다. (전부 그렇지는 않으며, 브라우저마다 차이가 있습니다.)

							div {
								transition-property: none | all | [property];
							}

none : transition 효과를 지정하지 않습니다.
all : 모든 속성이 transition 효과를 얻습니다.
property : transition 효과를 얻게될 속성을 지정합니다. transform, width, height, opacity, border-radius, margin, color, font-size, padding 등등

transition-duration 속성 (필수 선언)

transition 효과의 지속 시간을 명시합니다.
트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.

밀리초(millisecond, ms) 또는 초(second, s)로 지속시간을 설정할 수 있습니다.
1s는 1초이며, 0.1s는 숫자 0를 생략하고 .1s로 표기 가능합니다. (ms의 단위로 할 경우 1초 = 1000ms)

							div {
								transition-duration : 1s | 1000ms;
							}

transition-timing-function 속성

transition 구문의 세번째 자리에 오는 transition-timing-functing은 변화가 일어나는 속도를 설정한다.
즉, 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다.

대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다.
이징(easing: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.
변화의 시작과 끝 타이밍을 정의하며, 조금 더 정교한 또는 현실적인 움직임을 표현하기 위해 사용됩니다.
기본값은 ease이며 기본값으로 사용할 경우 생략 가능합니다.

							div {
								transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step(n) | cubic-bezier(n,n,n,n);
							}

ease

초반은 느리게, 중간은 빠르게, 종료지점은 느리게 변화가 진행됩니다.

								div {
									transition-timing-function: ease;
								}

linear

시작부터 종료까지 동일한 속도로 진행됩니다.

								div {
									transition-timing-function: linear;
								}

ease-in

느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동합니다.

								div {
									transition-timing-function: ease-in;
								}

ease-out

일정한 속도의 등속으로 시작해서 점점 느려지면서 멈춥니다.

								div {
									transition-timing-function: ease-out;
								}

ease-in-out

ease와 비슷합니다. 초반은 느리게, 중간은 빠르게, 종료지점은 느리게 변화가 진행됩니다.

								div {
									transition-timing-function: ease-in-out;
								}

steps(n)

애니메이션의 흐름을 Step(단계)화해서 제어할 수 있습니다.
duration 값과 연계해서 선언하여 일종의 Frame Rate(초당 프레임 수)를 설정하거나 혹은, 셀 애니메이션처럼 연계된 동작을 표현할 수도 있습니다.

								div {
									/* step-start */
									transition-timing-function: step-start;

									/* step-end */
									transition-timing-function: step-end;

									/* steps */
									transition-timing-function: steps(4, start)
								}

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

step-start: 는 모든 변화가 시작지점에 이루어집니다.
step-end: 는 모든 변화가 종료지점에 이루어집니다.
(transition-timing-function: 2s step-end;로 설정하였을 경우, 마우스 오버 후 2초 뒤에 변화가 일어납니다.)
steps: 는 설정한 단계에 따라 간격을 두고 변화가 일어납니다.

cubic-bezier(n,n,n,n)

처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있습니다. 베지어(Bezier)라는 곡선 운동을 정의합니다.

								div {
									transition-timing-function: cubic-bezier(n,n,n,n);
								}

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

cubic-bezier 곡선 그래프1 — [`cubic-bezier` 곡선 그래프]

transition-delay 속성

속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.(효과의 지연시간을 정의)
3s(3초)로 설정하면 이벤트 발생 3초 후에 transition이 작동됩니다.
지연시간이 필요 없으면 생략 가능합니다.

								div {
									transition-delay: 1s | 1000ms;
								}

transition 작성 방법

transition 작성 방법으로는 다음과 같이 사용할 수 있습니다.
아래 작성방법 중 최대 단축형과 확장 단축형이 주로 사용됩니다.

기본형

transition의 속성을 분리해서 정의할 수 있습니다.
code가 길어지는 단점이 있지만, 전체 속성(all) 대신 꼭 필요한 속성만 사용할 수 있습니다.

								div {
									transition-property: transform, color, border;
									transition-duration: .5s;
									transition-timing-function: ease;
									transition-delay: .2s;
								}

최대 단축형

변경할 속성이 한 개 또는 모든 css속성일 경우에 사용됩니다. (주로 property가 all일 경우에 많이 쓰입니다.)
모든 css속성(property)에 적용하고, 기본 타이밍(ease)을 사용하고, 지연시간(delay)이 없을 경우
transition:.5s; 이렇게 지속시간(duration)만 선언하여 사용 가능합니다.

								div {
									transition: all .5s ease 2s;
									/* transition: property(css 속성) duration(지속시간) timing delay(지연시간); */
								}

확장 단축형

변경할 속성이 두 개 이상일 때 사용되며, 각 속성별로 독립적인 움직임을 줄 수 있습니다.

								div {
									transition:
										transform .5s ease .2s,
										color .3s linear 1s;
								}

대입형

transition-property에 나열된 순서대로 다른 transition의 속성이 대입 적용됩니다.

								div {
									transition-property: transform, color, border;
									transition-duration: .5s, .3s, .25s;
									transition-timing-function: ease, linear, linear;
									transition-delay: .2s, 1s, 0s;
								}

transition 작성 시 주의사항

transition 속성에서 각 항목의 순서는 중요합니다.

시간으로 해석될 수 있는 값이 첫번째에 위치한다면 transition-duration으로 적용되고, 두번째에 위치한다면 transition-delay으로 적용됩니다.

속성값 목록이 알맞은 길이를 갖지 않는다면, 어떻게 처리될지 궁금하다면 아래 [속성값 목록이 다른 개수를 가진 경우]를 참고하세요.
실제 속성의 개수보다 많이 기술된 것은 무시됩니다.

속성값 목록이 다른 개수를 가진 경우

어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다.

										div {
											transition-property: opacity, left, top, height;
											transition-duration: 3s, 5s;
										}
										/* 위는 아래와 같이 처리합니다. */
										div {
											transition-property: opacity, left, top, height;
											transition-duration: 3s, 5s, 3s, 5s;
										}

어떤 속성의 값 목록이 transition-property 목록보다 길다면, 필요 없는 값을 잘라냅니다.

										div {
											transition-property: opacity, left;
											transition-duration: 3s, 5s, 2s, 1s;
										}
										/* 위를 아래와 같이 해석합니다. */
										div {
											transition-property: opacity, left;
											transition-duration: 3s, 5s;
										}

transition 예제

transition 테스트 및 요약설명

위에 설명된 transition의 속성을 직접 테스트 할 수 있습니다.
각 속성의 input값을 변경하여 마우스오버(hover) 또는 result버튼을 클릭하세요.
테스트기 출처 : http://921430km.com/transition