CSS 트랜지션(transition) 효과 사용 방법과 속성 - 이글 하나면 끝!

 

 

스카이웹 블로그에 오신걸 환영합니다!
Welcome to my blog!

티스토리 블로그 기능이 익숙하지 않은 상태에서 글을 올리는 거라서 이것 저것 아직 부족한게 많은 거 같습니다.
빠른 시간안에 빨리 익숙해 져야 겠네요.

오늘은 css의 transition에 대해서 알아보도록 하겠습니다.

 

 

CSS3 트랜지션에 대해서

 간단히 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기이 변화하는 시간을 지정해 줄 때 흔히 사용을 하곤합니다.

그리고 이렇게 스타일에 변화를 줄때 이 시간을 지정해 줌으로써 좀더 부드럽게 스타일 전환이 이루지게 되는 특징을 가지고 있습니다.

그래서 다음과 같은 값을 지정해 줄 필요가 있습니다.

1. 효과를 적용시킬 속성과 함께 시작시의 값과 완료시의 값
2. 변화하는 데 걸리는 시간

그리고, 이 transition은 transform과 함께 사용되어지는 경우가 많이 있습니다. transform에 대해서는 다음에 다시 다루기로 하고 오늘은 그냥 넘어가도록 하겠습니다.

 위에서 언급한 1번의 경우에는 transition-property에, 2번의 경우에는 transition-duration에 값을 지정해 주면 됩니다.

 

이 트렌지션에는 4가지의 속성이 있습니다.
한번에 이 4가지를 모두 지정해 줄 수도 있고, 하나씩 개별적으로 지정을 해 줄 수도 있습니다.

transition-property	변화를 적용할 CSS속성을 지정
transition-duration	변화가 시작된 시점부터 끝날 시점까지의 시간을 지정
transition-timing-function	변화 속도의 패턴을 지정
transition-delay	변화를 시작할 시간 지정

 

그럼, 이제 하나씩 살펴 보도록 하겠습니다.

 

 

트랜지션에 변화 및 효과 주기

transition-property

변화를 주고자 하는 CSS속성을 지정해 주면 됩니다. 물론 복수의 값을 지정해 줄 수도 있습니다.

요소명 { transition-property:값; }

이제 값으로 지정할 수 있는 것에는 다음과 같습니다.

none	적용할 속성이 없음
all	모든 속성에 변화 적용
변화줄 css속성	특정 속성에만 변화 적용

복수의 값을 지정할 수도 있다고 했는데요, 그럴 경우에는 컴마(,)를 기준으로 나열해 주면 됩니다.
한 번에 배경색을 변경하면서 넓이 혹은 높이까지 변화 및 변경이 가능하답니다.

아래의 예시를 한번 보도록 하죠.

.c-transition { 
    background-color:#000;
    transition-property:background-color;
    transition-duration:2.5s;
}
.c-transition:hover {
    background-color:#cc0000;
}

해당 요소에 마우스를 올리면 2.5초에 걸쳐서 배경색을 바꾸겠다는 내용입니다.

 

 

트랜지션에 적용할 시간 지정

transition-duration

이렇게 위에서 말한 트랜지션 프로퍼티를 지정해 준 후에 이제는 어느 정도의 시간 동안 변화를 줄 것인지를 설정해야만 하는데요, 그 시간을 설정해 주는 것이 바로 이 속성입니다.

시간의 단위는 s와 ms로 나타내어줄 수 있습니다. 여기서 s는 1초, ms는 1/1000초입니다.

c-transition 이라는 클래스를 가진 태그 요소에 3초에 걸쳐서 넓이를 변화시켜줄 경우의 코드를 한번 보도록 하겠습니다.

.c-transition {
    width:200px;
    transition-property:width;
    transition-duration:3s;
}
.c-transition:hover {
    width:500px;
}

물론, 콤마( , )를 사용해서 복수의 값을 지정해 줘도 됩니다.

 

 

변화시킬 패턴 지정

transition-timing-function

변화에 패턴을 지정할 수도 있습니다. 예를 들면, 천천히 -> 빠르게, 또는 빠르게 ->천천히 이런 식으로 단조로워질 수 있는 것에 한번 더 패턴을 지정해 줌으로써 유익한 효과를 얻을 수가 있게 됩니다. 좀 더 시각적 효과를 높여 준다고 보시면 될 것 같습니다.

이 패턴 값의 종류에는 9개가 있습니다.

ease

시작은 천천히 중간에는 빠르게 그리고 다시 끝에는 천천히 변화합니다.

 

linear

일정한 속도로 변화하게 됩니다.

 

ease-in

천천히 시작해서 빠르게 종료됩니다.

 

ease-out

빠르게 시작해서 느리게 끝납니다.

 

ease-in-out

시작, 종료 두 지점 다 천천히 변화를 가져갑니다.

 

steps(단계 횟수, start 또는 end)

지정해준 횟수만큼 위에서 먼저 설명한 transition-duration에 지정해준 시간 동안 동일한 간격을 가지고 변화를 가져갑니다.

여기서 start와 end의 차이를 조금 헷갈려 하실 수가 있는데.
start라고 지정해주면 시작과 동시에 변화를 가져가고, end라고 지정해주면 완료 시점에 마지막 스텝의 변화가 일어난다고 보시면 됩니다.

예를 들어, 시간을 1s(초)라고 지정을 하고 steps(3, start)의 경우는 1초 동안 시작하자마자 처음에 변화를 가져가면서 1번째 단계가 되는 것이고 steps(3, end)의 경우는 끝나는 시점 즉 3번째 단계에서 변화를 가져가고 종료하게 됩니다. end의 경우를 비교하기 쉽게 다시 말씀을 드리면 시작하자마자 처음에는 변화가 없다가 1초 동안 3단계로 균등하게 나눈 시간만큼 delay가 된 후에 변화를 가져간다고 보면 됩니다.

step-start

steps(1, start)와 같습니다.

 

step-end

step(1, end)와 같습니다.

 

cubic-bezier(x1, y1, x2, y2)

아래와 같은 3차원 베지어 곡선을 이용해서 값을 지정해 주게 됩니다.
먼저 변화를 줄 시간을 x축, 변화의 진행 정도를 y축으로 정해놓습니다. 그리고 시작점을 P0, 종료점을 P3라고 두고 이 두 점 사이에 어떠한 변화를 줄 두 군데의 점 즉 P1(x1, y1)와 P2(x2, y2)도 정해준다고 했을 경우 여기에 원하는 값을 cubic-bezier를 이용해서 지정하고 변화의 타이밍과 진행상태를 결정해 줄 수가 있습니다.
좀 더 디테일하게 변화를 가져가고자 할 경우에 사용할 수 있으며, 지정해 줄 수 있는 값의 범위는 0~1 사이에 있는 실수입니다.

 

---

 

그럼, 아래의 예제 코드는 어떤 결과물이 나올까 생각한번 해보세요.
그리고 직접 한번 작성해서 생각했던것과 일치하는지 아닌지도 확인해 보시구요.
html코드도 작성해야 하는거 다들 아시죠~

.c-transition {
    width:200px;
    opacity:0;
    transition-property:opacity;
    transition-duration:2s;
    transition-timing-function:steps(3, end);
}
.c-transition:hover {
    opacity:1;
}

 

 

시작 시점 지정

transition-delay

마지막 4번째 속성을 알아보도록 하겠습니다. 이 항목은 예를 들어 내가 다른 요소의 효과가 발생한 뒤에 원하는 변화를 주겠다 라고 하고 싶을 때가 있을 겁니다. 그때 이 delay 값에 시간 지정을 해주면 됩니다.
위쪽에서 설명한 property값을 여러 개를 지정해 주었을 경우 이 delay값도 콤마(,)를 사용하여 구분시켜 주고 설정을 해 주면 됩니다.

아래 코드 한번 확인해 보도록 하세요.

.c-transition {
    width:200px;
    opacity:0;
    transition-property:width, opacity;
    transition-duration:3s;
    transition-delay:2s, 3s;
}
.c-transition:hover {
    width:500px;
    opacity:1;
}

 

 

---

 

 

여기까지 오늘 알아볼 CSS3 트랜지션(transition) 효과에 관한 내용이었는데요.

어떠셨나요? 3차원 베지어 곡선 부분 이외에는 그렇게 어렵게 보이는 내용들은 아니었다고 생각합니다. 몇 번 정도 직접 표현하고 싶은 효과를 생각하고 만들어 보시면 금방 익숙하게 됩니다. 
이 트랜지션만 잘 사용하면 간단한 애니메이션 정도는 가능하니까 기본적인 스킬로 장착해 두시면 많은 장면에 유용하게 사용하실 수가 있게 될 겁니다.

 

아, 그리고, 한 가지 깜빡해서 추가 덧붙일게요.

위에서 말씀드린 내용들은 하나하나 지정을 하는 방법들이었는데요, 이것들을 한 번에 지정해서 사용하는 방법도 있습니다.
아래와 같이.

.c-transition {
	background-color:#f7f7f7;
	transition:background-color 3s ease-in 2.5s;
}
.c-transition:hover { 
	background-color:#777;
}

 

---

 

내용이 도움이 되신 분들은 공감과 댓글 많이 부탁드립니다.

좋은 하루 되세요.