CSS - transition, ease

Transition 

스타일 전환 효과 설정.

설정 요소와 지속 시간을 설정한다.

.redbox :nth-child(2) {
  height: 0;
  transition: height 0.5s ease;
}
.redbox:hover :nth-child(2) {
  height: 10vmin;
}

위 코드는 redbox 클래스 2번째 요소의 높이를 0에서 10vmin으로 0.5초만에 변경 시키는 것.

.redbox :nth-child(2) {
  height: 1px;
  transition: height 0.5s ease, width 1s;
}
.redbox:hover :nth-child(2) {
  height: 10vmin;
  width: 5vmin;
}

높이와 넓이를 동시에 설정할 수도 있다. 

 

전환 속도 설정

ease는 전환 효과의 속도를 설정하는 것으로 천천히 시작되어, 그 다음 빨라지고, 마지막에는 느려진다. 

 

1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.

2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.

3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.

4. ease-out : 전환(transition) 효과가 천천히 끝납니다.

5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.

6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

 

지연 시간 설정

transition-delay : 효과가 나타나는 시간을 지연시킬 수 있다. 

.size{
	height: 100px;
    width: 100px;
    transition-delay: 1s;
}
.size:hover { width: 300px; height: 300px; }