transition(전이,화면 이동)

transition(화면 이동을 이용한 점진적 효과)

transform(변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다.

transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동"이라는 의미로 받아들이는 것이 이해하기 쉽습니다.

화면 이동(transition)은 변형(transform)되는 중간의 상태를 의미한다고 할 수 있습니다.

즉, 어떠한 변형(transform)이 일어나는 동안의 상태를 화면 이동이라고 하고, 이에 대해서 시간을 지정해 줄 수 있습니다.

예를 들어서 마우스를 오버했을 때 어떤 변형을 일으키고 싶은데, 그 상태를 제어할 때 사용한다고 생각하면 됩니다.

transition 은 요소가 한 상태에서 다른 상태로 변형될 때(hover 효과와 같은 종류) 이 변화가 일정 시간동안 애니메이션화거나 transitioned, 즉 변천 과정을 겪는 것을 말합니다.

CSS transition 을 CSS 애니메이션 모듈과 혼동하면 안됩니다. CSS 애니메이션 모듈은 완전히 별개로 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있습니다.

transition(화면 이동)

transition 을 사용하려면 몇 가지 주목, 숙지해야할 사항들이 있습니다.

• 두 개의 스타일이 필요하다.

첫 번째 스타일은 요소의 "초기 상태"이고 두 번째 스타일은 요소의 "최종 상태"입니다.

예를 들어 첫 번째 스타일이 빨간 색 버튼 스타일이고 두 번째 스타일이 파란 색 버튼 스타일이라고 가정한다면 웹 브라우저는 첫 번째 상태(스타일)에서 두 번째 상태(스타일)로 점진적으로 화면 이동 효과를 만들어 냅니다.

• transition 속성

CSS3 는 transition 속성을 제공하며, 이 속성을 통해 애니메이션 효과를 만들어 냅니다.

일반적으로 transition 속성은 디자인상의 초기 상태스타일에 정의해 두는 것이 보통이다.

• trigger(방아쇠)

초기 상태와 최종 상태인 두 스타일 간의 변화를 유발하는 행위입니다.

CSS 에서는 몇 가지 가상 클래스를 사용해 애니메이션을 시작시킬 수 있는데 가장 널리 사용되는 것은 :hover 클래스입니다.

즉, 방문자가 요소 위에 마우스 커서를 올리는 순간에 애니메이션 효과를 시작하는 것입니다.

그리고 :active(요소를 마우스로 클릭한 상태), :target(요소가 링크의 목적지인 상태), :focus(탭을 통해 링크나 폼 필드로 포커스를 이동했거나, 폼 필드를 마우스로 클릭한 상태) 등의 가상 클래스도 방아쇠로서 사용할 수 있습니다.

또한, javascript 를 사용하면 어떤 태그의 스타일이라도 동적으로 변경할 수 있습니다.

방아쇠가 더 이상 적용되지 않는 시점이 되면, 즉 사용자가 버튼 위에 마우스를 오버했다가 버튼 위에서 오버아웃(빠져나왔을때)할 때 브라우저는 태그 스타일을 초기 상태로 되돌리는 동시에, 그 화면 이동 과정을 애니메이션으로 표현하게 됩니다.

다시 말해 화면이동 효과는 요소에 한 번만 적용하면 되고, 초기 상태 스타일에서 최종 상태 스타일로 갔다가 다시 복원되는 과정은 브라우저가 알아서 처리하게 됩니다.

화면 이동과 transition 속성

화면 이동을 처리하는 속성에는 애니메이션을 처리할 속성과 애니메이션 시간, 애니메이션 유형, 그리고 애니메이션이 시작되는 시간을 제어하는 네 가지의 속성이 있습니다.

• transition-duration : CSS 효과가 반영되는데 걸리는 시간, 즉 화면 이동이 종료되기 까지 걸리는 시간
• transition-timing-function : 시간에 따른 가속이나 감속
• transition-delay : 시간 지연
• transition-property : 화면 이동에 영향을 받는 속성으로 이 값을 지정하면 특정 사항에 대해서만 화면 이동 효과가 나타난다.

transition-property: keyword 과 transition-duration: time

transtion-property 속성은 웹 요소에 어떤 속성에 transition 효과를 적용할 지를 결정하는 속성입니다.

그리고 duration 은 화면 이동이 종료되기까지 걸리는 시간을 지정하는 속성으로 time 으로 적용될 값에는 ms(밀리초, 1/1000) 또는 s(초) 단위를 붙일 수 있습니다.

예를 들어 1,000ms 는 1s 와 같고 1.25s 1250ms 와 같습니다.

전환 기간의 기본 설정 값은 0 이기 때문에 화면 이동효과를 구현하려면 반드시 duration 값을 부여해야 합니다.

다음은 transtion-property, transition-duration 의 간단한 예제 코드입니다.

See the Pen transition-property, duration 예제 by jaeheekim (@jaehee) on CodePen.

첫 번째 demo-01 에는 property 로 font-size 를 지정했습니다. 위에서 언급했듯이 화면 이동효과를 구현하려면 반드시 duration 값이 있어야 합니다.

만약에 duration 값이 지정되어 있지 않고 transition-property 만 지정되어 있다면 단순히 CSS 2.1 레벨로도 구현이 가능한 :hover 했을 때 빠르게 폰트크기만 커진 상태와 별반 다를게 없을 것입니다.

그리고 demo-02 를 살펴보면 transition-duration: 2s; 만 선언되어 있습니다.

화면 이동 속성(transition-property)은 기본적으로 all 로 선언되어 있기 때문에 모든 속성에 그 화면 이동(전환)효과가 나타납니다.

transition-duration 만 설정돼 있어도 전환 효과가 나타나지만, 그 반대로는 전환 효과가 만들어지지 않는 점에 주의해야 합니다.

transition-property 속성에 영향을 받게 지정할 수 있는 CSS의 속성들은 다음과 같습니다.

• background-color, background-position, border-color, border-spacing, border-width
• bottom, top, left, right
• color, clip, crop, font-size, font-weight
• height, width, max-height, max-width, min-height, min-width
• margin, padding
• letter-spacing, line-height, text-indent, text-shadow, opacity
• vertical-align, visibility, word-spacing, z-index

등이 있습니다.

transition-timing-function(시간 함수)를 이용한 가속도 처리

CSS 효과에 점진적인 가속이나 감속을 지정하면 좀 더 멋진 효과를 나타낼 수 있습니다.

즉, 화면 이동이 진행되는 도중에 요소의 효과 방식을 조절하기 위해 transition-timing-function 속성을 사용할 수 있는데 대표적인 키워드는 다음과 같습니다.

• linear : 등속도
• ease-in : 가속
• ease-out : 감속
• ease : 점진적인 가속
• ease-in-out : 점진적인 가속 후에 감속

이 속성값을 통해 화면 이동 기간 동안 어느 정도의 빠르기로 화면 이동효과를 이뤄질 것인지를 설정하고 애니메이션 속도를 조절할 수 있습니다.

또한 이를 위해 사용되는 위의 키워드 말고도 cubic-bezier 함수도 있습니다.

기본 설정 값은 ease 로서 느리게 시작한 후 빠르게 가속되다가 다시 느리게 끝납니다.

linear 값이 적용되면 전환 과정에 속도의 변화 없이, 처음부터 끝까지 흐름이 일정하게 유지됩니다.

ease-in 값을 사용하면 애니메이션이 느리게 시작된 후 빠름 흐름으로 끝나고, ease-out 값을 사용하면 이와 반대의 현상이 일어납니다.

마지막 ease-in-out 은 느리게 시작한 후 중간 지점에서 빨라지다가 다시 느려지면서 끝나므로 ease 와 비슷하지만, 그 변화 정도가 ease의 경우처럼 급격하지는 않습니다.

시간 함수를 좀 더 구체적으로 이해하기 위해 상단의 예제 코드에 다음과 같이 시간 함수를 추가하여 살펴보도록 합니다.

See the Pen transition-timing-function #1 by jaeheekim (@jaehee) on CodePen.

위 예제 코드를 살펴봤다면 아마도 거의 차이점을 느끼지 못했을지도 모릅니다.

화면 이동에 대해서 설정하는 timing 속성은 실제로 사용자들에게는 거의 차이를 느끼지 못하는 경우가 많습니다.

이런 차이는 화면 위에서 좌우로 많이 이동하거나 시간 간격(duration)이 긴 경우에 좀 더 확실히 느낄 수 있습니다.

그래서 다음과 같은 화면을 만들어 실제 동작하는 것을 만들어 보아서 확인해 보도록 하겠습니다.

약간의 자바스크립트를 이용하여 처리하였으며 다음의 화면 영역 아무곳이나 클릭해 보시기 바랍니다. 

See the Pen transition-timing-function #2 by jaeheekim (@jaehee) on CodePen.

3차 베지어 곡선

transition-timing-function 에 적용할 수 있는 또 다른 값은 cubic-bezier 함수입니다.

3차 베지어 곡선(cubic Bezier curve) 의 문법은 다음과 같습니다.

css

.selector { 
    transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}

3차 베지어 곡선은 그리드상에 존재하는 4개의 점으로 만들어지며, 두 축을 따라 0부터 1까지의 좌표를 지닙니다.

여기서 4개의 점은 p₀, p₁, p₂, p₃ 로 부르는데, 이 점은 두 쌍의 (x, y) 좌표로 표시되고, 그 위치에 따라 곡선의 굽음의 정도(곡률)를 나타낼 수 있습니다.

이때 첫 번째 점(p₀)은 (0,0) 마지막 점(p₃)은 (1, 1)이고 p₁인 (x1, y1)과 p₂ (x1, y1) 인 다른 2개의 점을 함수에 정의합니다.

p₀, p₃ 는 항상 같은 값을 의미하므로 별도로 지정하지 않아도 됩니다.

.selector { transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8); }

다음은 3차 베지어 곡선의 그림으로 참고하시기 바랍니다.

cubic-bezier 함수는 수학 계산에 익숙하지 않은 경우에는 사용하기가 까다로운 편입니다.

하지만 3차 베지어 곡선상의 좌표값을 생성해 주는 온라인 도구를 사용하면 각기 다른 좌표점을 수월하게 알아낼 수 있고 테스트해 볼 수도 있습니다.

그리고 크롬 개발자 도구에서도 쉽게 알아볼 수 있기 때문에 이에 대해 크게 고민하기 보다 가감속에 대한 테스트를 해본 후 그 좌표를 이용하는 수준으로도 충분하리라 봅니다.

transition-delay: time (지연 속성)

화면 이동(전환,전이) 효과의 마지막 속성은 전환이 일어나는 시점을 설정할 수 있게 해주는 transition-delay 속성입니다.

transition-duration 속성에서처럼, 이번 속성의 time 값 역시 ms 또는 s 단위로 설정할 수 있습니다.

기본 설정 값은 0 으로서 이벤트가 발생하는 즉시 전환 효과가 일어나며, time 값에 양수를 입력하면 해당 시간이 경과한 후에 전환 효과가 일어나게 됩니다.

다음의 예제는 전환 효과가 2초 뒤에 발생하도록 다음과 같이 설정할 수 있습니다.

See the Pen transition-timing-delay #1 by jaeheekim (@jaehee) on CodePen.

transition-delay 에는 음수를 사용할 수 있는데, 음수값을 지정하면 꽤 재미있는 효과를 만들 수 있습니다.

지연 속성에 음수를 적용하면 바로(즉시) 전환 효과가 발생하되, 설정 시간(duration)만큼 애니메이션이 건너뛰어서 나타나게 됩니다.

결과 확인을 위해 다음과 같이 4초간 지속될 전환 효과에 -2초의 지연을 설정해 보도록 합니다.

See the Pen transition-delay #2 by jaeheekim (@jaehee) on CodePen.

위의 코드는 이벤트가 발생하면 전환 효과는 2초를 경과한 부분(화면 이동이 일어나는 기간에서 2초만큼을 뺀 부분)부터 즉시 시작되게 됩니다.

그래서 위 예제를 실행해 보면 전환 효과가 중간 부분부터 시작함을 확인하실 수 있을 것입니다.

transition 축약형 문법

지금까지는 각종 속성을 각각 추가하는 방식으로 화면 이동 효과를 구현했습니다.

CSS 속성 중 background 속성을 축약하여 여러 속성을 한 줄의 코드로 줄여서 작성할 수 있듯이 transition 도 다음과 같이 작성할 수 있습니다.

css

.selector { 
    transition: transition-property transition-duration transition-timing-function transition-delay;
}

위와 같이 해당 값을 순서대로 작성할 수 있으며 맨 앞의 transition-property 는 영향을 받는 속성을 기록해 두는 것으로, 특정한 속성에 대해서만 영향을 미치려고 할 때 사용합니다.

보통 all 값을 많이 이용하고 이 값은 모든 속성에 적용되므로 기본값처럼 사용할 수 있습니다.

나머지는 지속시간 → timing 속성 → 지연 시간 순서대로 다음과 같이 작성해 주면 됩니다.

transition: all 1.0s ease-in 0.5s;

그리고 주의해야 할 점은 time 값으로 transition-duration 과 transition-delay 가 있는데 하나의 time 값만 선언하면 이는 transition-duration 값으로 간주되고, transition-delay 는 기본 설정 값 또는 상속받은 값을 그대로 사용하는 것으로 간주됩니다.

See the Pen transition 축약형 문법 by jaeheekim (@jaehee) on CodePen.

related links

1. CSS3 transition(화면이동,전이)
2. CSS3 Animation(key frame)

Jaehee's WebClub