#8 Transition - 화면 이동을 위한 점진적 효과

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

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

트랜지션 개요

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

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

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

CSS 트랜지션과 CSS 애니메이션은 어떻게 다를까?

CSS transition 을 CSS 애니메이션 모듈과 혼동하면 안됩니다.

transition 은 요소가 한 상태에서 다른 상태로 변형될 때(hover 효과와 같은 종류) 이 변화가 일정 시간동안 애니메이션화거나 transitioned, 즉 변천 과정을 겪는 것을 말하고, CSS 애니메이션 모듈은 완전히 별개로 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있습니다.

CSS 애니메이션 모듈에 대한 자세한 내용은 추후 알아보도록 하겠습니다.

트랜지션 사용시 주의 및 숙지해야할 사항

transition 을 사용하려면 다음과 같은 사항을 숙지해야 합니다.

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

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

예를 들어 사용자가 버튼에 마우스오버를 한다고 가정해 본다면 마우스를 올리기 전의 디자인이 빨간색 버튼 색상이고 마우스를 올렸을 때 파란색 색상으로 변한다면 웹 브라우저는 마우스 오버전(초기 상태)의 스타일에서 마우스오버(종료 상태)상태의 스타일로 점진적 화면 이동(전이) 효과를 나타냅니다.

transition 속성을 적용해야 할 대상

transition 속성을 통해 애니매이션 효과가 만들어지며 이 속성이 적용될 대상은 디자인상의 초기 상태 스타일에 정의해 두는 것이 일반적입니다.

애니메이션 효과를 발생시키기 위한 방아쇠(trigger)

방아쇠의 역할은 초기 상태와 종료 상태인 두 스타일 간의 변화를 유발하는 행위입니다.

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

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

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

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

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

javaScript VS CSS Transition

불과 얼마 전까지는 간단한 애니메이션 조차 자바스크립트의 힘(?)을 빌려야 했습니다.

하지만 자바스크립트 없이도 유려한 애니메이션 구현이 가능해졌습니다.

즉, 복잡한 자바스크립트의 코드들을 간단하고 가독성이 좋은 단 한줄의 CSS 로 바꿀 수 있습니다.

다음의 코드는 많은 이들이 jQuery 라이브러리를 사용하여 0.5초동안 요소를 희미하게 만드는 방법을 보여주는 것입니다.
hover 될 때 불투명도가 원 상태보다 절반으로 떨어지고 hover 가 해제되면 원상태로 돌아가는 예제입니다.

css

$('a').hover(
    function () {
    $(this).stop().animate({opacity : '.5'}, 500); },
    function () { $(this).stop().animate({opacity : '1'}, 500);
});

위 예제는 복잡하지는 않지만 아주 간단한 효과를 내는 것에 비해 조금 긴 것 같습니다.
적어도 코드 상에서 jQeury를 포함해야 한다는 구문, 즉 사용자가 자바스크립트가 가능한 브라우저를 필요로 한다는 부분은 언급하지 않았다는 것도 감안해야 합니다.

위의 자바스크립트 구문을 CSS 트랜지션를 사용하는 방식으로 바꾼다면 다음과 같습니다.

css

a {
    transition: .5s;
}
a:hover {
    opacity: .5;
}

위 방법은 jQuery를 이용하는 것보다 시간과 노력이 훨씬 더 적게 들뿐 아니라 코드는 단순해져서 가독성도 높아졌습니다.

간단한 효과를 위해서는 간단한 코드를! 그것이 정석입니다.

물론 이 예제는 jQuery와 비교해서 간단명료하다는 점을 강조하기 위해 최소한의 문법만을 사용한 것입니다.

지금부터 위와 같은 효과를 나타낼 수 있는 속성에 대해 학습해 보도록 하겠습니다.

transition - 화면 이동,전이

간단히 트랜지션의 속성에 대해 살펴보면 다음과 같습니다.

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

css

a {
    background: yellow;
    color: #000;

    /* 전이가 일어날 속성값을 정의 */
    transition-property: background-color;

    /* 전이가 발생되는 시간 명시 */
    transition-duration: 1s; /* 1000밀리초와 같다 */
   
    transition-timing-function: linear; /* 등속도 */
   
    transition-delay: .5s; /* 500밀리초 */
}
    
a:hover {
    background-color: blue;
    color: #fff;
}

CSS 트랜지션(Transition): IE 10+

• transition-property : 화면 이동에 영향을 받는 속성으로 이 값을 지정하면 특정 사항에 대해서만 화면 이동 효과가 나타난다.(어떤 속성을 트랜지션 할 것인지)
• transition-duration : CSS 효과가 반영되는데 걸리는 시간, 즉 화면 이동이 종료되기 까지 걸리는 시간(트랜지션이 일어나는 지속시간)
• transition-timing-function : 타이밍 함수(어떤 움직임(시간에 따른 가속이나 감속)으로 반영할 것인지)
• transition-delay : 트랜지션 지연시간(애니메이션을 지연시킬 때)
• transition : 트랜지션 속기형(위의 속성들을 한데 모아서 작성할 때)

transition-property, transition-duration

transition-property 속성은 요소에 어떤 속성을 transition 효과로 나타낼 지를 결정하는 속성입니다.

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

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

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

다음은 transition-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-timing-function(시간함수를 이용한 가속도 처리)

이제부터 조금 복잡한 상황이 전개됩니다.

CSS 효과에 점진적인 가속이나 감속을 지정하면 좀 더 멋진 효과를 나타낼 수 있는데 transition-timing-function 이 역할을 수행합니다.

즉, 화면 전환이 일어나는 시간 동안 어떤 식으로 가속을 하고 감속을 하는지를 나타내는 속성입니다.

화면 전환의 효과를 조절하기 위해 사용할 수 있는 시간 함수의 대표적 키워드는 다음과 같습니다.

• linear : 등속도, 전환 과정에 속도의 변화 없이, 처음부터 끝까지 흐름이 일정하게 유지됩니다.
• ease : 점진적인 가속, 기본값은 ease 로서 느리게 시작한 후 빠르게 가속되다가 다시 느리게 끝납니다.
• ease-in : 가속, 애니메이션이 느리게 시작된 후 빠름 흐름으로 끝납니다.
• ease-out : 감속, 애니메이션이 빠르게 시작된 후 느리게 끝납니다.
• ease-in-out : 점진적인 가속 후에 감속, 느리게 시작한 후 중간 지점에서 빨라지다가 다시 느려지면서 끝나므로 ease 와 비슷하지만,
  그 변화 정도가 ease 의 경우처럼 급격하지는 않습니다.

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

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

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

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

cubic-bezier(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개의 점은 p0, p1, p2, p3 로 부르는데, 이 점은 두 쌍의 (x, y) 좌표로 표시되고,
그 위치에 따라 곡선의 굽음의 정도(곡률)를 나타낼 수 있습니다.

이때 첫 번째 점(p0)은 (0,0) 마지막 점(p3)은 (1, 1)이고 p1인 (x1, y1)과 p2 (x1, y1) 인 다른 2개의 점을 함수에 정의합니다.

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

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

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

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

Related Info

1. Easing functions 치트시트
2. CSS EASING ANIMATION TOOL

transition-delay(지연 속성)

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

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

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

다음 코드는 전환 효과가 2초 뒤에 발생하는 예제입니다.

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

transition-delay 의 음수 사용

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

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

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

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

transition(속기형)

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

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

앞서 언급했듯이 transition-duration 은 필수값입니다. transition-duration 의 초기 값이 0초이면 너무 즉각적으로 변화를 일으켜서 전이를 볼 수 없기 때문입니다.

css

.selector {
    /* 권장 속성 순서 */
    /* transition: prop dur timfn delay; */
div {
    transition: opacity .5s linear 2s;
    transition: linear .5s opacity 2s;
    transition: linear opacity .5s 2s;
    transition: .5s 2s opacity linear;
}

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

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

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

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

다시 말해, 두 개의 시간 관련 속성인 transition-duration 과 transition-delay 의 순서에 대해서는 반드시 지켜야하며, 항상 지속시간(transition-duration)을 먼저 명시해야 한다는 것입니다.

이에 대한 순서를 지킨다면 나머지 키워드의 순서는 원하는대로 설정(정의)할 수 있습니다.

화면 전환(전이) 속성에 대한 이해

앞서 살펴봤듯이 transition 속성을 적용해야 할 대상은 초기 상태 스타일에 정의해 두는 것이 일반적이라고 언급했습니다.

다음의 코드를 살펴보도록 합니다.

잘못된 예

a {
    background: blue;
    }
a:hover {
    background: red;
    transition: background .5s ease-in-out;
}

올바른 예

a {
    background: blue;
    transition: background .5s ease-in-out;
    }
a:hover {
    background: red;
}

잘못된 예는 반드시 틀린 것은 아닙니다. 다만, 의도치 않은 효과일 경우가 대부분입니다.

즉, 만약 해당 요소가 :hover 상태가 될 때 화면 전환이 일어나기를 원할 경우 transition 속성은 반드시 :hover 규칙이 아닌 대상에 정의되어야 해야 합니다.

만약 위 코드와 같이 작성했다면 요소가 :hover 상태로의 변화가 일어날 때 전환이 일어나지만 :hover 가 해제될 때는 요소가 다시 점진적으로 변하지 않고 본래의 기본 스타일로 매우 빠르게 되돌아가게 됩니다.

See the Pen 의도치 않은 트랜지션 효과 by jaeheekim (@jaehee) on CodePen.

때때로 이런 효과를 의도적으로 원하는 경우도 있을 수 있겠지만 일반적으로 :hover 상태에서 전이가 서서히 이루어졌다가 다시 되돌아가기를 바랄 것입니다.

이런 점을 염두에 두고 활용한다면 전이를 잘못 사용하는 일이 없을 것이고 필요한 곳에서 보다 정확하게 적용할 수 있을 것입니다.

On & Off 전이 개별적으로 적용하기

앞선 예제는 의도치 않은 효과였지만 만약에 사용자가 의도적으로 마우스 포인터가 요소에 접근할 때와 요소에서 멀어질 때 각각 다른 전이 효과를 원하는 경우도 생길 수 있습니다.

바로 이런 경우는 의도치 않은 예의 방법이 잘못 사용되는 것이 아니라 오히려 유효하게 활용될 수도 있습니다.

다음의 효과를 확인해 보도록 합니다.

See the Pen transition on & off test by jaeheekim (@jaehee) on CodePen.

위 코드는 해당 요소가 :hover 될 때 사용되는 초기 전이에 관한 부분은 :hover 규칙이 있는 쪽으로 옮겨 졌고, 그곳에 본래의 상태로 변경될 때 애니메이션이 되도록 하는 다른 transition 속성이 그 자리를 차지하고 있습니다.

결과를 보면 요소가 :hover 상태가 될 때 배경색이 푸른색에서 붉은색으로 1초에 걸쳐 변화하고 :hover가 해제될 때 붉은색 배경이 푸른색으로 5초라는 더 긴 시가에 걸쳐 점진적으로 변하게 됩니다.

위보다 조금 복잡한 상황을 만들 수도 있습니다. 다음 코드와 효과를 살펴봅니다.

See the Pen transition on & off test #2 by jaeheekim (@jaehee) on CodePen.

위 예제는 앞선 코드와 많이 달라진 것은 없지만 근본적으로 매우 다른 효과를 보여주고 있습니다.

:hover 상태 전이는 transition-property에 background 속성만 애니메이션을 적용하고 있습니다.

즉, 배경색이 푸른색에서 붉은색으로 1초 동안 전이가 진행되고 rotate() 함수에는 어떤 애니메이션도 적용되지 않았기 때문에 360deg의 값이 처음 :hover의 작용에 어떤 영향도 미치지 못합니다.(물론 360deg 값은 초기 0deg 값과 동일하다)

반대로 기본 규칙상의 transition 속성, 즉 :hover 상태에서 본래의 상태로 돌아가는 변화에 주는 속성은 duration 매개변수만을 가지고 있습니다.

최종 결과물을 다시 간략하게 분석하면 다음과 같습니다.

• 사용자가 마우스를 요소 위로 가져가면 배경색이 1초동안 푸른색에서 붉은색으로 변화게 된다.
• 마우스 포인터가 요소를 벗어나면 배경색이 붉은색에서 푸른색으로 변하면서 요소는 반시계 방향으로 0.5초만에 360도를 회전하게 된다.

Related Info

1. 트랜지션 사용하기
2. 트랜지션 문법

Jaehee's WebClub