전환 효과

transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

• transition-property: 속성명
• transition-duration: 지속시간 (단축형으로 작성할 때 필수 포함 속성)
• transition-timing-function: 타이밍함수
• transition-delay: 대기시간

 

transition-property: 전환 효과를 사용할 속성 이름을 지정

all: 모든 속성에 적용 (기본값)

속성이름: 전환 효과를 사용할 속성 이름 명시

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 
    width .5s,
    background-color 2s;
}

transition-timing-function: 전환 효과의 타이밍(Easing) 함수를 지정

• ease: 느리게-빠르게-느리게 = cubic-bezier(0.25, 0.1, 0.25, 1) (기본값)
• linear: 일정하게 = cubic-bezier(0, 0, 1, 1)
• ease-in: 느리게 - 빠르게 = cubic-bezier(0.42, 0, 1, 1)
• ease-out: 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
• ease-in-out: 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0, 0.58, 1)
• ccubic-bezier(n, n, n, n): 자신만의 값을 정의(0~1)
• steps(n): n번 분할된 애니메이션

참고 사이트

easings.net/ko

Easing Functions Cheat Sheet

developer.mozilla.org/en-US/docs/Web/CSS/easing-function

- CSS: Cascading Style Sheets | MDN

greensock.com/docs/v2/Easing

Docs

 

transition-delay: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

0s: 대기시간 없음 (기본값)

시간: 대기시간(s)을 지정

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 
    1s .5s;
}