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-delay/index.html | 395 +++++++++++++++++++++++++++ 1 file changed, 395 insertions(+) create mode 100644 files/ko/web/css/transition-delay/index.html (limited to 'files/ko/web/css/transition-delay') diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html new file mode 100644 index 0000000000..17a8543321 --- /dev/null +++ b/files/ko/web/css/transition-delay/index.html @@ -0,0 +1,395 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +translation_of: Web/CSS/transition-delay +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

transition-delay CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 transition하기까지 기다려야하는 시간의 양을 지정합니다.

+ +

A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

+ +

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the {{cssxref("transition-property")}} property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <time> values */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* Global values */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+
+ +

Values

+ +
+
<time>
+
Is a {{cssxref("<time>")}} denoting the amount of time to wait between a property's value changing and the start of the animation effect.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
+
+

transition-delay: 0.5s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+ +

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

[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] See blog post about Opera 12.50.

+ +

See also

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