Transition

스타일링을 하다보면 요소의 속성이 변화를 하는 경우가 존재하는데 한번에 휙 바뀌는 것이 아닌 애니메이션을 주어 스르르 변화하게 도와주는 친구라고 생각하자. 4가지 속성에 대해 알아보자.

Property, Duration, [Timing Function], [Delay]

1. property

내가 무언가 변화를 주고자 하는 태그 혹은 선택자에 먼저 지정을 하고 변화하는 선택자나 태그에 변화하는 속성을 기재해주자. 하단에 있는 속성은 예시로 작성하였다.

.box {
  background-color: red;
  font-size: 12px;
  transition: background-color 2000ms ease-in, font-size 1500ms;
}

.box .active {
  background-color: blue;
  font-size: 4px;
}

기존 선택자에 변화하려는 transition 속성을 기재하고, 그 이후에 변화한 선택자에 변화한 내용의 속성을 기재하면 된다.

2. duration

transition 속성을 사용할 때 얼마간의 시간에 걸려서 작동하는지 설정한다.

3. timing_function

생략 되어도 상관 없으나 사용할 수 있는 속성은 대게 4가지로 존재한다. ease-in은 천천히 움직이다 빠르게, ease-out은 빠르게 움직이다 천천히, ease-in-out은 두가지가 섞여있다. cubic-bezier()은 곡선의 모양을 이루고 있다.

4. delay

transition 속성을 이용한 애니메이션 효과가 시간이 지난 후에 작동되도록 적용할 수도 있다.

.box {
  background-color: red;
  font-size: 12px;
  transition: background-color 2000ms ease-in 4000ms;
}

전자에 시간은 duration, 후자의 시간은 delay를 의미한다.