From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/transition-delay/index.html | 388 +++++++++++++++++++++++++++ 1 file changed, 388 insertions(+) create mode 100644 files/es/web/css/transition-delay/index.html (limited to 'files/es/web/css/transition-delay/index.html') diff --git a/files/es/web/css/transition-delay/index.html b/files/es/web/css/transition-delay/index.html new file mode 100644 index 0000000000..b3c85d103f --- /dev/null +++ b/files/es/web/css/transition-delay/index.html @@ -0,0 +1,388 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +translation_of: Web/CSS/transition-delay +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad CSS transition-delay especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (transition effect).

+ +

Un valor de 0s, o 0ms, indica que la propiedad comenzará a animar la transición inmediatamente cuando el valor cambie; valores positivos retrasaran el comienzo del efecto de transicion por el numero de segundos correspondiente. Valores negativos causaran que la transicion comience inmediatamente, pero causando que el efecto de la transicion pareciera que empiece por la mitad de la animacion.

+ +

Puedes especificar multiples retrasos ("delays"); cada retraso se aplicará a la propiedad correspondiente especificada por la propiedad {{ cssxref("transition-property") }}, que actua como una lista maestra. Si hay menos delays especificados que en la lista maestra, valores perdidos son puestos en el valor inicial (0s).

+ +

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

+ +
Formal syntax: {{csssyntax("transition-delay")}}
+
+ +
transition-delay: 3s
+transition-delay: 2s, 4ms
+
+transition-delay: initial
+
+ +

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.
+
+ +

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') }} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		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") }}		{{ CompatUnknown() }}10.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
+
+ +

See also

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