CSS
전환

통사론

• transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

매개 변수

비고

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

전환 속기

CSS

div{
    width: 150px;
    height:150px;
    background-color: red;
    transition: background-color 1s;
}
div:hover{
    background-color: green;
}

HTML

<div></div>

이 예제는 div가 움직일 때 배경색을 변경합니다. 배경색 변경은 1 초간 지속됩니다.

전환 (길이)

CSS

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition-property: height, width;
  transition-duration: 1s, 500ms;
  transition-timing-function: linear;
  transition-delay: 0s, 1s;
}
div:hover {
  height: 200px;
  width: 200px;
}

HTML

<div></div>

• transition-property : 전환 효과가있는 CSS 속성을 지정합니다. 이 경우 div는 가로 놓을 때 가로 및 세로로 확장됩니다.
• transition-duration : 전환이 완료되는 데 걸리는 시간을 지정합니다. 위의 예에서 높이와 너비 전환은 각각 1 초와 500 밀리 초가 걸립니다.
• transition-timing-function : 전환 효과의 속도 곡선을 지정합니다. 선형 값은 전환이 처음부터 끝까지 동일한 속도를 갖음을 나타냅니다.
• transition-delay : 전환 효과가 시작되기 전에 대기해야하는 시간을 지정합니다. 이 경우, 너비는 1 초를 기다리는 반면 높이는 즉시 전환을 시작합니다.

큐빅 베 지어

cubic-bezier ( cubic-bezier 기능은 사용자 정의 및 부드러운 전환에 자주 사용되는 전환 타이밍 기능입니다.

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

이 함수는 네 개의 매개 변수를 취합니다.

cubic-bezier(P1_x, P1_y, P2_x, P2_y)

이러한 매개 변수는 베 지어 곡선의 일부인 점에 매핑됩니다.

CSS 베 지어 곡선의 경우 P0과 P3은 항상 같은 지점에 있습니다. cubic-bezier 함수에 전달 된 매개 변수가 0과 1 사이에있을 수있는 P0는 (0,0)에 있고 P3은 (1,1)에 있습니다.

이 간격에없는 매개 변수를 전달하면 함수는 linear 변환으로 기본 설정됩니다.

cubic-bezier는 CSS에서 가장 유연한 전환이므로 다른 모든 전환 타이밍 함수를 cubic-bezier 함수로 변환 할 수 있습니다.

linear : cubic-bezier(0,0,1,1)

ease-in cubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-out cubic-bezier(0.42, 0.0, 0.58, 1.0)