CSS Transitions

CSS Transtions를 사용하면 주어진 duration동안 property values가 스무스~~하게 변한다.

(* duration을 안정해주면 default 값으로 0초가 설정되기 때문에 아무런 변화가 일어나지 않는다!)

 

 

 

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

div:hover {
  width: 300px;
}

 

 

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

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

div:hover {
  width: 300px;
  height: 300px;
}

이렇게 하면 div에 hover했을 때 부드럽게~ 너비와 높이가 변한다. 너비는 2초동안 높이는 4초동안.

 

 

Specify the Speed Curve of the Transition

animation과 같이 transition도 transition-timing-function 속성이 있어서 transition 효과의 speed curve를 설정할 수 있다. transition-timing-function 속성이 가지는 values:

 

• ease: slow start->fast->slow end (default)
• linear: 시작부터 끝까지 같은 속도
• ease-in: slow start
• ease-out: slow end
• ease-in-out: slow start -> slow end
• cubic-bezier(n,n,n,n): 직접 설정 가능

 

 

Delay the Transition Effect

transition-delay property 또한 animation 때와 같이 잠시 delay 했다가 효과 시작하고 싶을 때.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

 

 

Transition + Transformation

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

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

transform과 합쳐져서 width 300px로 2초동안, height 300px로 이초동안

180도 회전 transform도 2초동안

 

 

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

div:hover {
  width: 300px;
}

transition도 shorthand로 적을 수 있다.

뭐가 transition 되기 원하는지 | duration | speed curve | delay