[CSS] transition

transition

- 애니메이션 속도를 조절하는 방법

- 요소에 스타일의 변화를 일정 시간애 걸쳐서 부드럽게 나타나게 함

- transition은 hover할 원래 요소에 적용함

 

1. transition: 아래 4가지 송겅을 한 번에 지정 가능

 

2. trainsition-property: 트랜지션을 적용할 속성 이름

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

 

3. transition-duration: 스타일 변화가 일어나는 기간

transition-duration: 0.5s

 

4. transition-timing-fuction: 스타일 변화를 일으키는 방식

- ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등

- codezipper로 그래프로 속도 조절

transition-timing-function: linear
transition-timing-function: steps(4, end)

 

5. transition-delay: 스타일 변화가 시작되기 전까지의 시간

transition-delay: 0.5s

 

 

속성값 목록이 다른 개수를 가진 경우

- 어떤 속성값 목록이 trainsition-property보다 짧다면, 일치되도록 그 값을 반복

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

 

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

 

- 어떤 속성값 목록이 trainsition-property보다 길다면, 그것은 끝을 잘라냄

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

 

+

display: none에서 block으로 바뀔 때 transition을 적용할 수 없음

---

[추가 자료] transition-timing-function 그리는 사이트: https://cubic-bezier.com/#.25,.1,.25,1

cubic-bezier.com

 

 

 

[출처] https://www.daleseo.com/css-transitions/

CSS 트랜지션(transition)

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN