transition
트랜지션(transition)은 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 말합니다. 스타일이 바뀌는 시간을 조절하면 애니메이션 효과도 낼 수 있습니다.
CSS3 트랜지션을 실행하기 위해서 다음과 같은 여러 속성이 사용됩니다. 각 속성에 대한 자세한 대용은 이어서 설명드리겠습니다.
목차
transition-property
transition-property 속성은 트랜지션을 어느 속성에 적용할 것인지 선택합니다.
- none : 모든 속성에 적용하지 않습니다.
- all : 모든 속성에 적용합니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
transition-duration
transition-duration 속성은 트랜지션이 끝날 때까지 걸리는 진행 시간을
정합니다.
단위는 초(s) 또는 밀리초(ms) 를 사용합니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
transition-timing-function
transition-timing-function 속성은 트랜지션의 진행 속도를 정할 수 있습니다.
- linear : 등속으로 움직입니다.
- ease : 끝 지점에서 천천히, 그 외는 빠르게 움직입니다
- ease-in : 느리게 시작된 후 빠름 흐름으로 끝납니다.
- ease-out : 감속, 애니메이션이 빠르게 시작된 후 느리게 끝납니다.
- ease-in-out : ease 와 비슷하지만,그 변화 정도가 ease 의 경우처럼 급격하지는 않습니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
transition-delay
transition-delay 속성은 애니메이션을 시작하기 전에 대기하는 시간을 정합니다.
단위는 s 또는 ms 를 사용합니다. 기본값은 0s 입니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
축약형
애니메이션의 여러 속성은 transition 속성으로 줄여서 표현할 수 있습니다.
transition: opacity .5s linear 2s;
transition: linear .5s opacity 2s;
transition: linear opacity .5s 2s;
transition: .5s 2s opacity linear;
시간 관련 속성인 transition-duration(지속시간)과 transition-delay(지연시간) 중 transition-duration(지속시간)을 먼저 명시해야 합니다.