The transition Property

%% 요소를 보여줍니다.\\ %%

%% 요소는 또한 2초의 지속 시간을 가진 너비 속성에 대한 transition 효과를 지정합니다.\\ ==== Example ====


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

\\ transition 효과는 지정한 %%CSS%% 속성 (너비)이 값을 변경할 때 시작합니다.\\ 이제 사용자가 %%

%%요소에 마우스를 올릴 경우 너비 속성에 대한 새로운 값을 지정합니다.\\ ==== Example ====


  The transition Property
  




  The transition Property

  Mouse over the div element below, to see the transtion effect:
  

  Note: This example does not work in Internet Explorer 9 and earlier versions.

\\ 마우스 커서가 요소 밖으로 나가면, 점차 기존 스타일로 다시 변경되는 것을 확인하세요\\ ===== Change Several Property Values ===== 아래의 예제는 너비에 대한 2초의 지속 시간과 높이에 대한 4초의 지속 시간 설정으로\\ 너비와 높이 속성에 대한 transition 효과를 추가합니다.\\ ===== Example =====


  




  The transition Property

  Hover over the div element below, to see the transition effect:

  

  Note: This example does not work in Internet Explorer 9 and earlier version.

===== Specify the Speed Curve of the Transition ===== ''%%transition-timing-function%%'' 속성은 transition 효과의 속도 곡선(speed curve)을 지정합니다.\\ \\ transition-timing-function 속성은 아래의 값들을 가질 수 있습니다.\\ \\ * ''%%ease%%'' - slow start, then fast, then end slowly의 transition 효과를 지정합니다. (기본 값) * ''%%linear%%'' - 시작부터 끝까지 동일한 속도로 transition 효과를 지정합니다. * ''%%ease-in%%'' - slow start로 transition 효과를 지정합니다. * ''%%ease-out%%'' - slow end로 transition 효과를 지정합니다. * ''%%ease-in-out%%'' - slow start와 slow-end로 transition 효과를 지정합니다. * ''%%cubic-bezier(n,n,n,n)%%'' - 3차 베지어 함수(cubic-bezier function)에서 고유한 값을 정의할 수 있습니다. \\ 아래의 예제에서 사용할 수 있는 다양한 속도 곡선을 확인합니다.\\ ==== Example ====


 The transition-timing-function Property
  




  The transition-timing-function Property

  Hover over the div element below, to see the different speed curves:

  linear


  ease


  ease-in


  ease-out


  ease-in-out



  Note: This example does not work in Internet Explorer 9 and earlier versions.

===== Delay the Transition Effect ===== ''%%transition-delay%%'' 속성은 transition 효과에 대한 초 단위의 지연(delay)을 지정합니다.\\ \\ 아래의 예제에서 시작하기 전 1초의 지연을 확인하세요.\\ ==== Example ====


  




  The transition-delay Property

  Hover over the div element below, to see the transition effect:

  

  Note: The transition effect has a 1 second delay before starting.

  Note: This example does not work in Internet Explorer 9 and earlier versions

===== Transition+ Transformation ===== 아래의 예제에서 transformation(변환)에 transition 효과 추가를 확인합니다.\\ ==== Example ====


  Transition + Transform
  




  Transition + Transform

  Hover over the div element below:

  

  Note: This example does not work in Internet Explorer 9 and earlier versions.

===== More Transition Examples ===== %%CSS%% transition 속성은 아래와 같이 각각 1개씩 지정할 수 있습니다.\\


  The transition Properties Specified One by One
  




  The transition Properties Specified One by One

  Hover over the div element below, to see the transition effect:

  

  Note: The transition effect has a 1 second delay before starting.
  Note: This example does not work in Internet Explorer 9 and earlier versions.

\\ 또는 아래와 같이 약식 속성 ''%%transition%%''을 사용할 수도 있습니다.\\


  Using The transition Shorthand Property
  




  Using The transition Shorthand Property

  Hover over the div element below, to see the transition effect:

  

  Note: The transition effect has a 1 second delay before starting.

  Note: This example does not work in Internet Explorer 9 and earlier versions.

===== CSS Transition Properties ===== 아래의 테이블 목록은 모든 %%CSS%% transition 속성들을 보여줍니다.\\ \\ ^ Property ^ Description ^ | transition | 4개의 transition 속성을 단일 속성으로 설정하기 위한 약식 속성 | | transition-delay | transition 효과에 대한 지연 시간( 초 시간)을 지정합니다. | | transition-duration | transition 효과가 적용될 초 또는 밀리 초 시간을 지정합니다. | | transition-property | transition 효과를 적용하기 위한 %%CSS%% 속성 이름을 지정합니다. | | transition-timing-function | transition효과의 속도 곡선(speed curve)을 지정합니다. | {{tag>오션, CSS Transitions}}