aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/animation-delay
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/animation-delay
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/css/animation-delay')
-rw-r--r--files/es/web/css/animation-delay/index.html125
1 files changed, 125 insertions, 0 deletions
diff --git a/files/es/web/css/animation-delay/index.html b/files/es/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..6edea7e4f2
--- /dev/null
+++ b/files/es/web/css/animation-delay/index.html
@@ -0,0 +1,125 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+ - CSS
+ - CSS Animations
+ - CSS Property
+ - Experimental
+ - Reference
+translation_of: Web/CSS/animation-delay
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-delay</code> especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.</p>
+
+<p>El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.</p>
+
+<p>Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.</p>
+
+<p>Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.</p>
+
+<p>A menudo es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar las propiedades de animación una sola vez.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox">Gramática formal: <a href="/en-US/docs/CSS/time">&lt;time&gt;</a> [, <a href="/en-US/docs/CSS/time">&lt;time&gt;</a>]*
+</pre>
+
+<pre>animation-delay: 3s
+animation-delay: 2s, 4ms
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando <code>s</code>) o milisegundos (usando <code>ms</code>). Si no especificamos la unidad, la sentencia no será válida.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{ SpecName('CSS3 Animations', '#animation-delay', 'animation-delay') }}</td>
+ <td>{{ Spec2('CSS3 Animations') }}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+ <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }}</td>
+ <td>10</td>
+ <td>12{{ property_prefix("-o") }}<br>
+ 12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+ <td>4.0{{ property_prefix("-webkit") }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+ <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoMobile("16.0") }}</td>
+ <td>{{ CompatUnknown() }}</td>
+ <td>12{{ property_prefix("-o") }}</td>
+ <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Consulte_también">Consulte también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Usando animaciones CSS</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>