aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/api/animation/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/api/animation/index.html
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pt-br/web/api/animation/index.html')
-rw-r--r--files/pt-br/web/api/animation/index.html171
1 files changed, 171 insertions, 0 deletions
diff --git a/files/pt-br/web/api/animation/index.html b/files/pt-br/web/api/animation/index.html
new file mode 100644
index 0000000000..09d2f0091c
--- /dev/null
+++ b/files/pt-br/web/api/animation/index.html
@@ -0,0 +1,171 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+ - API
+ - Animations
+ - Experimental
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+ - Web Animations
+ - waapi
+ - web animation api
+translation_of: Web/API/Animation
+---
+<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
+
+<p>A interface <strong><code>Animation</code></strong> da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Cria uma nova instância do objeto <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa ou ainda não foi executada, este valor é <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Obtém e define o {{domxref("KeyframeEffect")}} associado a essa animação.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Retorna a <code>Primise</code> de finalização atual para essa animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Obtém e define a <code>String</code> usada para identificar a animação.</dd>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Obtém e define o manipulador para o evento <code>cancel</code>.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Obtém e define o manipulador para o evento <code>finish</code>.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Retorna um valor enumerado descrevendo o estado de execução de uma animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Obtém ou define a taxa de execução da animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Retorna a promessa atual para quando essa animação estiver pronta.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Obtém ou define o tempo agendado quando a execução de uma animação deve começar.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Obtém ou define a {{domxref("AnimationTimeline", "timeline")}} associada a essa animação.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Limpa todos os {{domxref("KeyframeEffect", "keyframeEffects")}} causados por essa animação e aborta sua execução.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Suspende a execução de uma animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Move a animação ao contrário, parando no início da animação.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Especificação</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentário</th>
+ </tr>
+ <tr>
+ <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+ <td>{{Spec2("Web Animations")}}</td>
+ <td>Definição inicial</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Recurso</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Suporte básico</td>
+ <td>{{CompatChrome(39.0)}} [1]</td>
+ <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Recurso</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Suporte básico</td>
+ <td>{{CompatVersionUnknown}} [1]</td>
+ <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado como <code>AnimationPlayer</code> (nome da interface em uma versão primária da especificação).</p>
+
+<p>[2] Anteriormente ao Firefox 40, estava disponível como <code>AnimationPlayer</code>. Em ambos os casos, é necessário definir a preferência <code>dom.animations-api.core.enabled</code> para poder usá-la.</p>
+
+<p> </p>