From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/transition/index.html | 150 +++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/ko/web/css/transition/index.html (limited to 'files/ko/web/css/transition/index.html') diff --git a/files/ko/web/css/transition/index.html b/files/ko/web/css/transition/index.html new file mode 100644 index 0000000000..039bedc362 --- /dev/null +++ b/files/ko/web/css/transition/index.html @@ -0,0 +1,150 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

transition CSS 속성은 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} 과 {{ cssxref("transition-delay") }}를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 {{cssxref(":hover")}} 이나 {{cssxref(":active")}} 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Apply to 1 property */
+/* property name | duration */
+transition: margin-left 4s;
+
+/* property name | duration | delay */
+transition: margin-left 4s 1s;
+
+/* property name | duration | timing function | delay */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-left 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+
+ +

이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 {{cssxref("transition-duration")}} 로 적용되고, 두번째에 위치한다면 {{cssxref("transition-delay")}} 로 적용됩니다.

+ +

속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 속성값 목록이 다른 개수를 가진 경우를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

CSS 트랜지션 사용하기 에 다양한 CSS transition 예제가 있습니다.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{ property_prefix("-webkit") }}
+ 26.0 #		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}[1]		10.010.1 {{ property_prefix("-o") }}
+ 12.10 #		3.0 {{ property_prefix("-webkit") }}
+ 6.1
Gradients[2]{{ CompatNo() }}{{ CompatNo() }}10.0{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}[1]		10.010.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
Gradients[1]{{ CompatNo() }}{{ CompatNo() }}10.0{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[2] PPK test

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf