transition: 속성명 지속시간 타이밍함수 대기시간;
: 요소의 전환효과를 지정하는 단축 속성
: transition-duration = 지속시간 = 필수 속성
transition-property
: 전환 효과를 사용할 속성 이름
- 기본값
all
: 모든 속성에 전환효과를 적용- 설정값
속성이름
: 지정된 속성에만 전환효과를 적용
transition-duration
: 전환 효과의 지속시간
- 기본값
0s
: 전환 효과 없음- 설정값
시간
: 지정된 시간동안 전환효과를 적용
transition-timing-function
: 전환효과의 타이밍 함수 지정
- 기본값
ease
: 느리게 - 빠르게 - 느리게
::cubic-bezier(0.25, 0.1, 0.25, 0.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)
cubic-bezier(n, n, n, n)
: 커스텀 (n = 0 ~ 1)steps(n)
: n번 분할된 애니메이션참고 사이트
(1) 타이밍 함수 시트 - 사용가능한 타이밍 함수의 종류와 함수의 시각적 이해
(2) 타이밍 함수 mdn - 타이밍 함수와 cubic bezier curve에 대한 설명 사용가능한 키워드
transition-delay
: 전환 효과에 대기시간을 부여
- 기본값
0s
: 전환 효과 없음- 설정값
시간
: 지정된 시간 이후 전환효과를 적용