[CSS] transition 속성으로 애니메이션 효과 주기

transition

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

div {
  transition: 속성명, 지속시간(필수), 타이밍함수, 대기시간;
}

div {
  transition: transition-property, transition-duration(필수), transition-timing-function, transition-delay;
}

 

transition의 속성값

1. transition-property

전환 효과를 사용할 속성 이름을 설정

• all: 모든 CSS 속성에 적용 (default)
• 속성이름: 전환 효과를 사용할 속성 이름 명시

div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 1초동안 적용한다

div {
  transition: all 1s;
}

div 요소에 있는 width라는 속성에 변화가 생길때 transition 효과를 1초동안 적용한다

div {
  transition: width 1s;
}

2. transition-duration (필수)

전환 효과의 지속 시간을 지정

• 0s: 전환 효과 없음 (default)
• 시간(s): 지속시간을 지정

div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 0초동안 적용한다 (transition 없음)

div {
  transition: all 0s;
}

div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 0.5초동안 적용한다 (transition 있음)

div {
  transition: all 0.5s;
}

3. transition-timing-function

전환 효과의 속도를 지정

• linear: 일정하게
• ease: 느리게 → 빠르게 → 느리게
• ease-in: 느리게 → 빠르게
• ease-out: 빠르게 → 느리게
• ease-in-out: 느리게 → 빠르게 → 느리게
• cubic-bezier(n, n, n, n): 전환효과를 custom하기

div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 ease-in-out(느리게 → 빠르게 → 느리게) 속도로 1초동안 적용한다

div {
  transition: all 1s ease-in-out;
}

4. transition-delay

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

• 0s: 대기시간 없음
• 시간(s): 대기시간 지정

div 요소에 있는 어떤 속성에 변화가 생길때 5초 후에 transition 효과를 ease-in-out(느리게 → 빠르게 → 느리게) 속도로 1초동안 적용한다

div {
  transition: all 1s ease-in-out 5s;
}