트랜지션 (transition)
트랜지션이란, 웹 요소의 스타일 변화 또는 움직임이 일정 시간에 걸쳐 부드럽게 나타나는 것을 말한다.
애니메이션 기능과 더불어 사용하게 되면 시각적인 변화 (어느정도 심플하고 단순한 변환 효과) 를javascript 없이 구현할 수 있다는 점에서 활용도가 높아지고 있는 추세이다.
트랜지션 효과를 구현하기 위해서는 아래 네가지의 속성이 필요하다.
트랜지션 효과를 구현하기 위한 네가지의 속성
transition-property: 트랜지션 효과를 적용할 대상을 지정transition-duration: 트랜지션 효과의 시작하고 완료되기까지의 소요 시간 (진행 시간) 을 지정transition-timing-function: 트랜지션 효과의 속도 패턴을 지정 (변환 속도)transition-delay: 트랜지션 효과를 늦게 구현하고 싶을 때, 지연 시간을 지정
💎 transition
<style>
선택자 {
transition: 대상지정 소요시간 속도패턴 지연시간;}
</style>트랜지션 효과를 구현하기 위한 네가지 속성을 한줄에 표기할 수 있는 단축형 속성이다.
시간값 s 을 두개 사용하므로 먼저 명시된 값이 소요시간 transition-duration ,
나중에 명시된 값이 지연시간 transition-delay 이다.
💎 transition-property
<style>
선택자 {
transition-property: 속성값;}
</style>트랜지션 효과를 적용할 대상을 지정하는 속성이다.
이 속성에 대한 속성값으로는 세가지가 있다.
all: 기본값, 모든 대상에게 트랜지션 효과를 적용한다.
none: 트랜지션 효과가 구현되는 동안 아무 효과도 나타내지 않는다.
속성이름: 트랜지션 효과를 적용할 속성을 지정한다. (대상을 지정한다.)여러 속성에게 적용할 경우 쉼표
.로 구분한다.
💎 transition-duration
<style>
선택자 {
transition-duration: 속성값;}
</style>트랜지션 효과가 시작하고 완료되기까지의 소요 시간 (진행 시간) 을 지정하는 속성이다.
속성값은 초단위 s 또는 밀리초단위 ms 의 시간값을 사용한다.
대상 지정 속성인
transition-property에 여러 대상이 지정되어 있는 경우, 소요 시간 속성인transition-duration속성의 시간 값도 쉼표,로 구분하여 순서대로 지정한다.
💎 transition-timing-function
<style>
선택자 {
transition-timing-function: 속성값;}
</style>트랜지션 효과의 속도 패턴 (변환 속도) 을 지정하는 속성이다.
속성값은 키워드 를 사용하거나, 단계수로 간격을 분할하여 변환하는 값을 명시하는 steps 값을 사용하거나, 3차 베지어곡선 cubic-bezier 을 사용한다.
키워드
ease(기본값) : 천천히 - 빨리 - 천천히
ease-in: 느리게 시작하여 점점 가속한다.
ease-out: 빨리 시작하여 점점 느리게 끝난다.
ease-in-out: 느리게 - 천천히 가속 - 느리게
linear: 처음부터 끝까지 똑같은 속도로 변환한다.
단계수로 간격을 분할하여 변환하게 하는 방식
steps(단계수, start|end): 단계수는 1 이상의 정수, 그리고start또는end표기
step-start:steps(1,start)값과 동일, 시작하는 지점에 스텝을 끊어준다.
step-end:steps(1,end)값과 동일, 끝나는 지점에 스텝을 끊어준다.
아래 그림은 step 의 단계수별 그래프 형태이다. (출처: W3C)
3차 베지어 곡선을 이용하는 방식
cubic-bezier: x축을 시간, y축을 진행비율 로 하여 시작점과 끝나는 지점 사이의 2개의 제어점 좌표를 지정함으로써 타이밍을 조절한다.
cubic-bezier(x1,y1,x2,y2)각 네개의 값으로는 0과 1 사이의 (0~1) 실수를 사용한다.
아래 그림은 3차 베지어 곡선의 형태이다. (출처:cubic-bezier.com )
베지어 함수 관련 굉장한 사이트를 발견했다. 참고해서 공부해봐야징 ..
https://cubic-bezier.com/#.17,.67,.8,.71
표로도 정리해보았다.
| 키워드 | 설명 | cubic-bezier 값 | steps 값 |
|---|---|---|---|
| ease | 천천히 - 빨리 - 천천히 | (0.25, 0.1, 0.25, 1) | |
| ease-in | 느리게 - 점점 가속 | (0.42, 0, 1, 1) | |
| ease-out | 빨리 - 느리게 | (0, 0, 0.58, 1) | |
| ease-in-out | 느리게 - 천천히 가속 - 느리게 | (0.42, 0, 0.58, 1) | |
| linear | 일정한 속도로 변환 | (0, 0, 1, 1) | |
| step-start | 시작하는 지점에 스텝을 끊어준다. | steps(1,start) | |
| step-end | 끝나는 지점에 스텝을 끊어준다. | steps(1,end) |
💎 transition-delay
<style>
선택자 {
transition-delay: 속성값;}
</style>트랜지션 효과를 언제 시작시킬건지에 대한 지연시간을 지정하는 속성이다.
속성값은 초단위 s 또는 밀리초단위 ms 의 시간값을 사용한다.
transition-delay: 2s라는 값을 주면 해당 트렌지션은 실제로 2초 후에 시작한다.
기본값은0s이다.
애니메이션 (animation)
애니메이션이란, 웹 요소의 CSS 스타일이 다른 CSS 스타일로 부드럽게 변환되는 것을 말한다.
트랜지션 transition 효과로도 어느정도 스타일 변환을 부드럽게 할 수 있지만 애니메이션 animation 보다는 제한적이다. 애니메이션 효과는 트랜지션보다 훨씬 더 복잡하고 다양한 속성을 가지고 있기 때문에 세부적인 움직임에 대한 시간 단위 제어, 재생과 정지, 반복 등 정밀한 변환 효과를 구현할 수 있다.
두 효과의 가장 큰 차이점은 transition 효과는 엘리먼트의 스타일이 바뀌는 과정을 애니메이션으로 구현하고, animation 효과는 엘리먼트의 상태 변화에 상관 없이 애니메이션을 구현한다는 점이다.
애니메이션 효과를 구현하기 위해서는 아래 8개의 속성이 필요하다.
애니메이션 효과를 구현하기 위한 9가지 속성
@keyframes: 키프레임의 위치를 지정한다.animation-name: 애니메이션 이름을 지정한다.animation-duration: 애니메이션의 소요 시간 (진행 시간) 을 지정한다.animation-timing-function: 애니메이션의 속도 패턴을 지정한다. (변환 속도)animation-delay: 애니메이션의 지연 시간을 지정한다.animation-iteration-count: 애니메이션의 재생 횟수를 지정한다.animation-direction: 애니메이션의 진행 방향을 지정한다.animation-fill-mode: 애니메이션이 종료된 후 (또는 대기 상태에서의) 요소 스타일을 지정하는 속성animation-play-state: 애니메이션의 재생 여부 (재생 또는 중지) 를 지정한다.
🧩 animation
<style>
선택자 {
animation: 이름 소요시간 지연시간 재생횟수 진행방향 종료후스타일지정값;}
</style>애니메이션 효과를 구현하기 위한 모든 속성을 한줄에 표기할 수 있는 단축형 속성이다.
소요 시간 속성인 animation-duration 속성을 반드시 지정해야한다.
name - duration - delay - iteration-count - direction - fill-mode
위 순서로 값을 표기한다.
🧩 @keyframes
<style>
선택자 {
@keyframes 애니메이션 이름 { /*애니메이션을 재생하기 위해 미리 정의된 animation-name 명시*/
from {
시작 지점: 속성값;} /*애니메이션이 시작하는 지점을 지정*/
to {
끝나는 지점: 속성값;} /*애니메이션이 끝나는 지점을 지정*/
}
}
</style>CSS 스타일 문서에서 애니메이션의 구간을 정의하고, 각 구간별로 어떤 스타일을 적용시킬지 지정하는 속성이다.
즉,
@keyframes라고 정의한 부분은 어떠한 애니메이션의 재생 구간과 스타일을 의미하는 것이다.이 재생 구간을 지정하기 위해서는 미리 애니메이션의 속성들과 함께 정의된
animation-name이 필요하다.
from과to로 지정한 애니메이션의 재생 구간은 0%~100% 의 백분율로 나타내도 무방하다.
시작 지점과 끝나는 지점 뿐만 아니라 중간지점을 지정할 수도 있다.
각 시작 지점과 끝 지점에 부여할 속성값은leftmargin-right같은 위치 키워드를 사용하거나,opacitywidth같은 또 다른 속성과 속성값을 부여한다.
🧩 animation-name
<style>
선택자 {
animation-name: 정의할 이름;}
</style>CSS 스타일 문서에서 재생 구간인 @keyframes 에 호출되기 위한 애니메이션의 이름을 정의하는 속성이다.
유효한 이름
문자열로 시작하는 이름 ex)
name;
언더바_로 시작하는 이름 ex)_name;
하이픈-로 시작하는 이름 ex)-name;
유효하지 않은 이름
숫자로 시작하는 이름 ex)
1name;
특수문자로 시작하는 이름 ex)#name;
none 으로 정의하면 애니메이션을 재생하지 않는다.
🧩 animation-duration
<style>
선택자 {
animation-duration: ;}
</style>애니메이션 효과가 시작하고 완료되기까지의 소요 시간 (진행 시간) 을 지정하는 속성이다.
속성값은 초단위 s 또는 밀리초단위 ms 의 시간값을 사용한다.
반드시 지정해야 하는 속성이다. 이 속성을 지정하지 않을 경우 기본값인
0s로 지정되기 때문에 애니메이션이 재생되지 않는다.
🧩 animation-timing-function
<style>
선택자 {
animation-timing-function: 속성값;}
</style>애니메이션 효과의 속도 패턴 (변환 속도) 을 지정하는 속성이다.
속성값은 키워드 를 사용하거나, 단계수로 간격을 분할하여 변환하는 값을 명시하는 steps 값을 사용하거나, 3차 베지어곡선 cubic-bezier 을 사용한다.
키워드
ease(기본값) : 천천히 - 빨리 - 천천히
ease-in: 느리게 시작하여 점점 가속한다.
ease-out: 빨리 시작하여 점점 느리게 끝난다.
ease-in-out: 느리게 - 천천히 가속 - 느리게
linear: 처음부터 끝까지 똑같은 속도로 변환한다.
단계수로 간격을 분할하여 변환하게 하는 방식
steps(단계수, start|end): 단계수는 1 이상의 정수, 그리고start또는end표기
step-start:steps(1,start)값과 동일, 시작하는 지점에 스텝을 끊어준다.
step-end:steps(1,end)값과 동일, 끝나는 지점에 스텝을 끊어준다.
3차 베지어 곡선을 이용하는 방식
cubic-bezier: x축을 시간, y축을 진행비율 로 하여 시작점과 끝나는 지점 사이의 2개의 제어점 좌표를 지정함으로써 타이밍을 조절한다.
cubic-bezier(x1,y1,x2,y2)각 네개의 값으로는 0과 1 사이의 (0~1) 실수를 사용한다.
🧩 animation-delay
<style>
선택자 {
animation-delay: 속성값;}
</style>애니메이션 효과를 언제 시작시킬건지에 대한 지연시간을 지정하는 속성이다.
0기본값 : 바로 애니메이션을 시작한다.
now: 기본값과 같다. 바로 애니메이션을 시작한다. (버전 상이)
시간값: 지정한 시간값의 시간이 지난 뒤 애니메이션을 시작한다.속성값은 초단위
s또는 밀리초단위ms의 시간값을 사용한다.
양수와 음수 사용이 가능하다. 음수를 사용할 시, 지정한 시간이 지난 뒤의 장면을 바로 재생한다.
animation-delay: -1s;일 시, 1초가 지난 뒤의 장면부터 바로 재생한다.
🧩 animation-iteration-count
<style>
선택자 {
animation-iteration-count: 속성값;}
</style>애니메이션의 재생 횟수를 지정하는 속성이다.
infinite: 애니메이션을 무한으로 반복한다.
숫자: 기본값은1이며 지정한 숫자의 횟수만큼 애니메이션을 재생한다.숫자가 소수일 경우, 한번 반 재생되는 것과 비슷하게 구현된다.
숫자가 음수일 경우, 애니메이션을 재생하지 않는다.
🧩 animation-direction
<style>
선택자 {
animation-direction: 속성값;}
</style>애니메이션의 진행하는 방향을 지정하는 속성이다.
normal기본값 : 순방향 (from ~ to) 으로 재생한다. 재생이 끝나면 첫번째 프레임부터 다시 시작한다.
alternate: 순방향으로 시작하여 역방향과 번갈아 재생한다. (홀수번째는 순방향, 짝수번째는 역방향으로 재생된다.)
reverse: 역방향 (to ~ from) 으로 재생한다. 재생이 끝나면 마지막 프레임부터 다시 시작한다.
alternate-reverse: 역방향으로 시작하여 순방향과 번갈아 재생한다. (홀수번째는 역방향, 짝수번째는 순방향으로 재생된다.)
방향을 지정할 때에는 속도 패턴 속성인 animation-timing-function 에도 적용이 된다.
속도 패턴 속성값을 ease-in 으로 지정했을 때, 방향 속성을 순방향값으로 지정했다면 원래대로 느리게 시작하여 점점 가속하는 패턴를 갖는다.
반대로 속도 패턴 속성값을 ease-in 으로 지정했을 때, 방향 속성을 역방향값으로 지정했다면 속도 패턴도 반대로 적용되어 빠르게 시작하여 점점 느리게 끝나는 패턴을 갖는다.
🧩 animation-fill-mode
<style>
선택자 {
animation-fill-mode: 속성값;}
</style>애니메이션이 종료된 후 (또는 대기 상태에서의) 요소 스타일을 지정하는 속성이다.
none기본값 : 스타일을 지정하지 않는다. 애니메이션 실행 전 상태로 되돌리고 종료된다.
forwards: 애니메이션이 키프레임의 100% 지점에 도착했을 때의 마지막 키프레임을 유지한다.
backwards: 애니메이션 스타일을 애니메이션이 재생되기 전에 미리 적용해놓는다.
both:forwards와backwards를 둘 다 적용한다.
예제를 만들어 확인해보는 것이 이해를 도울 것 같다...
🧩 animation-paly-state
<style>
선택자 {
animation-play-state: 속성값;}
</style>애니메이션의 재생 여부 (재생 또는 중지) 를 지정하는 속성이다.
running기본값 : 애니메이션을 재생한다.
paused: 애니메이션을 정지한다.
보통 재생버튼이나 stop버튼 클릭을 이용해 속성을 부여하는 스타일을 많이 사용하는 것 같다.
