CSS transition 요약 정리

 

CSS transition 요약 정리를 해보겠습니다.

 

transition은 transform이나 animation 효과에 대한 지속 시간, 딜레이, 움직이는 느낌 등을 설정할 수 있는 기능입니다.

 

그러나 꼭 트랜스폼이나 애니메이션 효과가 아니더라도 트랜지션은 유용하게 쓰입니다.

 

예를 들어 배경이 검은색이었다가 특정 행동을 하면 투명해지도록 설정했다면, 그 전환 효과를 부드럽게 해주는 역할을 하기도 합니다.

transition 축약 사용

 

animation처럼 transition 명령도 관련된 메소드들을 한꺼번에 설정할 수 있습니다.

 

transition에 숫자 뒤에 s또는 ms를 써서 지속 시간만 설정할 수도 있고, 다음과 같이 콤마로 여러가지 메소드를 설정할 수 있습니다.

 

/* 변화할 값, 지속 시간, 움직이는 느낌, 딜레이 */

div{transition: margin-right 4s ease-in-out 1s;}

 

 

지속 시간은 필수입니다. 전환 효과가 일어나는 요소에 시간을 적어줘야 전환이 그시간 안에서 일어납니다. 

 

또한 너비는 3초 높이는 1초 이런 식으로 디테일한 지속 시간 등의 셋팅도 가능합니다. 

 

 

그럼 이제 transition으로 여러가지 설정값을 축약해서 사용할 줄 알았으니, 사용할 수 있는 설정값들은 어떤 것들이 있는지 알아보겠습니다.

transition의 설정값

 

1. 지속 시간

 

transition-duration을 통해 지속 시간을 설정할 수 있습니다. 숫자 옆에 s(초) 또는 ms(밀리초)를 적습니다.

 

 

2. 움직이는 느낌

 

transition-timing-function으로 전환 효과의 움직이는 느낌을 설정할 수 있습니다.

 

움직이는 느낌으로는 ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end가 있습니다.

 

위 설정값은 animation에도 사용되며, 지난글에 설명했으니 어떤 움직임인지 참고하시기 바랍니다.

 

2022.08.02 - [웹구현/HTML CSS] - CSS animation 핵심 정리, 사용법

 

 

cubic-bezier

추가로 transition-timing-function에는 cubic-bezier(n,n,n,n)라는 것도 있는데, 함수에 값을 입력해서 순차적으로 재생되게 합니다.

 

어렵게 느껴질 수 있지만 기존 linear나 ease로 원하는 느낌이 나오지 않을때 커스텀으로 설정한다고 생각하면 쉽습니다.

 

실제로 개발자 도구에서 해당 요소의  cubic-bezier 앞의 아이콘을 누르면 그래프를 조절하며 움직임을 실시간으로 실험해볼 수 있습니다.

 

 

W3School 예제 페이지에서 cubic-bezier를 확인해보세요.

 

 

3. 딜레이

transition-delay로 전환 효과가 시작되기까지의 시간을 지연할 수 있습니다.

 

 

이상으로 CSS transition 요약 정리를 마치겠습니다.

 

transition에 대한 더욱 자세한 정보는 MDN 트랜지션 페이지를 참고하시면 되겠습니다. 읽어주셔서 감사합니다.