CSS Transition

Table of contents

1. Transitions
   1. What is Transitions?
2. Transition Properties
   1. transition
   2. transition-delay
   3. transition-duration
   4. transition-property
   5. transition-timing-function

Transitions

What is Transitions?

Property values를 시간을 주고 부드럽게 움직이게 하는것

▸ 필수요소 : 원하는 프로퍼티, 지속시간(default : 0)

Transition Properties

기본형식

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

transition

단축프로퍼티

div {
  transition: property duration timing-function delay;
}

transition-delay

딜레이 걸기

transition-duration

지속시간

transition-property

트랜지션 걸 프로퍼티

transition-timing-function

스피드 커브 설정

• ease : a transition effect with a slow start, then fast, then end slowly (this is default)

• linear : a transition effect with the same speed from start to end

• ease-in : a transition effect with a slow start

• ease-out : a transition effect with a slow end

• ease-in-out : a transition effect with a slow start and end

• cubic-bezier(n,n,n,n) : define your own values in a cubic-bezier function

W3C Example