[
Index ]
Index ]1. transition이란 무엇인가?
2. 종합 사용 방법
3. transition이 가능한 tag들
4. transition-property
5. transition-duration
6. transition-delay
7. transition-timing-function
1. transition이란 무엇인가?
CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있습니다. CSS 에서 특정 속성을 변경할 때가 있을 겁니다. 예를 들어서 font-size 를 10px에서 14px로 바꾸든지 말이지요. 이 때 CSS 속성 변경이 즉시 실행되게 하는 대신에, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. font-size 기 10px에서 14px로 천천히 바뀌도록, 혹은 부드럽게 바뀌도록 해줄 수 있는 것이지요.
변경 시키기 전의 상태를 initial state, 후의 상태를 final state 라고 하겠습니다. CSS 의 속성을 변화시킬 때 사진에서 처럼 initial state 에서 final state 즉각적으로! 빠릿빠릿하게 움직입니다.
이렇게 말이지요!!! 두 상태 (initial, final) 사이의 애니메이션을 암묵적 트랜지션(implicit transitions)이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.
CSS transitions는 여러분이 어떤 속성(property)을 움직이게 할지,언제 애니메이션이 시작(delay)할지, 트랜지션을 얼마나 지속(duration)할지, 그리고 어떻게 트랜지션을 실행(timing-function)하는지를 스스로 결정하게 해줍니다. 너무 유용하죠?
transition을 알아보기에 앞서 어떤 tag에서 transition을 사용할 수 있는지 알아야 하겠죠?
이 사이트에서 알 수 있습니다. 우리가 평소에 사용하는 엥간한 태그들은 사용할 수 있어요!
이제 어떻게 사용하는지 MDN 사이트를 근거로 알아보기로 해요ㅎㅎ
2. 종합 사용 방법
각 속성들을 알아보기 전에, 간단한 사용법만 알고 넘어가시고 싶으실 수 있기 때문에 사용법을 먼저 보여드립니다.
바꾸고 싶은 CSS에서 어떤 속성(property)을, 언제 시작(delay)할지, 얼마나 지속(duration)할지, 그리고 어떻게 실행(timing-function)하는지를 선택해봅시다.
transition: <property> <duration> <timing-function> <delay>;
CSS
복사
이런 식으로 한 줄에 설정하면 됩니다. 저는 아래와 같이 설정해볼게요.
transition: width 2s ease-in 1s;
CSS
복사
전체 코드는 아래에 숨겨두겠습니다.
All codes
간단하죠?ㅎㅎ
3. transition-property
property 는 transition을 적용할 속성을 정의해줍니다. 만약 우리가 margin-right를 스무스하게 움직이고 싶다면 이를 적어주면 되고, font color을 스무스하게 바꾸고 싶다면 적어주면 되는 것입니다.
4. transition-duration
duration 은 CSS가 얼마나 천천히 변할지를 설정해줄 수 있습니다.
5. transition-delay
delay 는 일정 시간이 지난 후에 CSS속성을 변화시켜달라고 얘기해줄 수 있습니다. 역시 property와 짝지어서 선택해줄 수도 있지요.
6. transition-timing-function
여기서는 CSS 의 상태가 바뀌는 과정을 선택할 수 있습니다. linear을 하면 마치 마치 직선처럼 스무스하게 바뀌며, ease-in 은 처음에는 느리게 가다가 갑자기 빠르게 갑니다. step을 사용하면 뚝뚝 끊어지는 느낌을 줄 수 있으며, cubic-bezier을 사용하면 크기가 커졌다 작아졌다 하는 느낌을 받죠.
이 속성은 줄 수 있는 효과들이 다양하기 때문에 아래의 사이트에서 더 많은 정보를 얻기 바래요!
<출처>
transition-timing-func? (https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
