CSS transition(전환) 에 대해 정리해보았다.

---

🖊 transition

transition : 상태 A 에서 상태 B 로 변화하는 과정을 시간에 따라 보여준다.
쉽게 말해, 시간값을 가지는 페이드인(Fade In) 효과를 보여준다.

• 별도의 JavaScript 가 없더라도 조금 더 다이나믹한 웹페이지를 만들 수 있다.

• 일반적인 CSS 요소와 다른 점 = 시간값이 추가된다.

• transition 자체는 아래의 여러 프로퍼티(속성) 들을 합친 단축 속성이다.

• :hover 등과 같은 가상 클래스에 선언하면 해당 클래스가 참일 때만 변환이 적용되는 점을 유의하자!
  ex) .box:hover 에 선언하면 마우스를 올릴 때는 시간에 따라 변환되지만 내림과 동시에 툭 바뀌어버린다.

  일반 .box 에 선언	.box:hover 에 선언

  
  

🦊 MDN Link - transition

1. transition-property 속성

transition-property : 변환시키고싶은 요소의 속성을 선택한다.

• 기본값은 all 이다.

• 변환시키고싶은 속성들을 , (쉼표)로 구분하여 나열한 값을 가진다.

🦊 MDN Link - transition-property

2. transition-duration 속성

transition-duration : 변환 애니메이션이 완료되기까지의 시간(지속 시간) 을 지정한다.

• <time> 자료형을 값으로 사용한다.
  --> animation 과 transition 에서 쓰인다.

• 숫자+s 혹은 숫자+ms 형식으로 값을 지정한다.
  --> 1000ms(밀리세컨드) = 1s(세컨드)

🦊 MDN Link - transition-duration

3. transition-delay 속성

transition-delay : 얼마동안의 시간 지연 후에 변환을 일으킬지 결정한다.

• 기본값은 0s 이다.

• duration 속성과 마찬가지로 시간값을 가진다.

🦊 MDN Link - transition-delay

4. transition-timing-function 속성

transition-timing-function : 변환이 일어나는 도중의 행동을 지정한다.

• 기본값은 ease 이다.

• ease-in, ease-out, linear 와 같은 키워드들이 값으로 사용될 수 있다.
  --> 각각의 값들은 중간 과정의 속도를 조절한다.
  ex) linear : 등속 / ease-out : 갈수록 느려짐 / ...

🦊 MDN Link - transition-timing-function

---

🖊 transition 단축해서 사용하기

• transition 자체가 단축속성이며,
  속성들이 모두 연관되어있기 때문에 대부분 한줄에 작성하는 경우가 많다.

기본값 재정리

• transition-delay = 0s
• transition-duration = 0s
• transition-property = all
• transition-timing-function = ease

속성 기입 순서 ⭐️

• <time> 자료형을 사용하는 프로퍼티가 두가지이기 때문에 시간값 순서가 중요하다!

1. 시간값이 하나만 존재할 경우 = duration
2. 시간값이 두 개 존재할 경우 = duration | delay
   --> 앞쪽에 있는 시간값이 지속시간이다.

• 실제 속성의 개수보다 많이 기술된 것은 무시된다.

• 변환시키고 싶은 속성이 여러개일 경우 덩어리로 묶고 , (쉼표)로 나열한다.

Example

/* 모든 속성을 변형하고싶은 경우 */
.box {
  transition: all 3s ease-in-out 1s;
}

/* 높이와 배경색만 변형하고싶은 경우 --> 이 때 배경색은 2초 지연 후 변경된다. */
.box {
  transition: height 3s ease-in-out, background-color 1s linear 2s;
}