div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
\\
transition 효과는 지정한 %%CSS%% 속성 (너비)이 값을 변경할 때 시작합니다.\\
이제 사용자가 %%
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}}