initial commit

4 files changed, 672 insertions, 0 deletions

diff --git a/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html b/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..f26773f0c9
--- /dev/null
+++ b/files/pt-br/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,99 @@
+---
+title: Detectando suporte a animação CSS
+slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+tags:
+  - Animações CSS
+  - Avançado
+  - CSS
+  - Guía
+  - JavaScript
+  - Lixo
+  - Referencia
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}</div>
+
+<p>Animações CSS torna possível a criação de conteúdo animado e criativo utilizando nada além de CSS. No entando, haverá momentos em que este recurso não estará disponível, e você pode querer lidar com isso utilizando um código JavaScript que simule um efeito semelhante. Este artigo, baseado <a href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">neste post do blog</a> de Chris Heilmann, demonstra uma técnica para fazer isso.</p>
+
+<h2 id="Testando_por_suporte_de_animação_CSS">Testando por suporte de animação CSS</h2>
+
+<p>Este código irá verificar se o suporte a animação CSS está disponível:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Para iniciantes definimos algumas variáveis. Assumimos que a animação não é suportada iniciando <code>animation</code> com <code>false</code>. Setamos <code>animationstring</code> com <code>animation</code> que é a propriedade que desejamos setar posteriormente para com <code>true</code>. Criamos um <em>array</em> de prefixos de navegadores para percorrê-lo e setamos <code>pfx</code> com uma <em>string</em> vazia.</p>
+
+<p>Então verificamos se a propriedade CSS {{ cssxref("animation-name") }} na coleção de estilo do elemento especificado pelo nome <code>elem</code> está definido. Isto significa que o navegador suporta animação CSS sem nenhum prefixo.</p>
+
+<p>Se o navegador não suporta animação não prefixada e <code>animation</code> permanece <code>falso</code>, iteramos através de todas as possibilidade de prefixos dos principais navegadores que prefixam esta propriedade e acrescentamos este prefixo ao atributo <code>AnimationName</code>.</p>
+
+<p>Quando a execução deste código termina, o valor de <code>animation</code> será <code>false</code> se não houver suporte a animação CSS, ou <code>true</code> no caso contrário. Se seja <code>true</code> tanto a propriedade de nome de animação quanto o prefixo de <em>keyframe</em> estarão corretos. Se utiliza o novo Firefox, a propriedade será <code>MozAnimation</code> e o prefixo de <em>keyframe</em> <code>-moz-</code>, para o Chrome será <code>WebkitAnimation</code> e <code>-webkit-</code>. Observe que os navegadores não deixam fácil a adoção de <em>camelCase</em> ou hifenização.</p>
+
+<h2 id="Animando_utilizando_a_sintaxe_correta_para_navegadores_diferentes">Animando utilizando a sintaxe correta para navegadores diferentes</h2>
+
+<p>Agora que sabe se a animação CSS é suportada ou não, nós iremos animar.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // chamada para a animação em JavaScript
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Este código analisa o valor de <code>animation</code>; se é <code>false</code>, saberemos que precisaremos utilizar nosso código JavaScript para executar a animação. Por outro lado, podemos usar o JavaScript para criar um efeito de animação CSS desejado.</p>
+
+<p>Modificar a propriedade de animação é fácil; basta atualizar seu valor na coleção de estilos. No entanto, adicionar <em>keyframes</em> é mais difícil, pois não é definito utilizando a sintaxe tradicional do CSS (que torna-o mais flexível, mas difícil em definir de um script).</p>
+
+<p>Para definir nosso <em>keyframes</em> usando JavaScript, precisamos escrevê-lo como uma <em>string</em> CSS. Tudo que precisamos é setar a variável <code>keyframes</code>, prefixando cada atributo que será construído. Esta variável, uma vez construída, contém a descrição completa de todos os <em>keyframes</em> necessários pela nossa sequência de animação.</p>
+
+<p>A tarefa seguinte é adicionar os <em>keyframes</em> ao CSS da página. A primeira coisa a se fazer é procurar se existe uma folha de estilos no documento; caso exista, inserimos a descrição do <em>keyframe</em> nesta folha de estilo; isto é feito nas linhas 13-15.</p>
+
+<p>Se não existe uma folha de estilos, um novo elemento {{ HTMLElement("style") }} é criado, e seu conteúdo é setado com o valor dos <em>keyframes</em>. Então o novo elemento {{ HTMLElement("style") }} é inserido no {{ HTMLElement("head") }} do documento, adicionando assim uma nova folha de estilos ao documento.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/CSS/CSS_animations">Animações CSS</a></li>
+</ul>
diff --git a/files/pt-br/web/css/css_animations/index.html b/files/pt-br/web/css/css_animations/index.html
new file mode 100644
index 0000000000..7c953b2359
--- /dev/null
+++ b/files/pt-br/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/css/css_animations/tips/index.html b/files/pt-br/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..48df63997b
--- /dev/null
+++ b/files/pt-br/web/css/css_animations/tips/index.html
@@ -0,0 +1,105 @@
+---
+title: CSS Animations tips and tricks
+slug: Web/CSS/CSS_Animations/Tips
+tags:
+  - Animações CSS
+  - CSS
+  - Comofazer
+  - Exemplo
+  - Tutorial
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<p><span class="seoSummary">Animações CSS tornam possível fazer coisas incríveis com os elementos que compoem seus documentos e aplicativos. No entanto, existem coisas que você pode querer fazer que não são óbvias, ou jeitos espertos de fazer coisas que você pode não ter pensado de imediato. Esse artigo é uma coleção de dicas e truques que descobrimos que podem tornar seu trabalho mais fácil, incluindo como rodar uma animação parada novamente.</span></p>
+
+<h2 id="Run_an_animation_again" name="Run_an_animation_again">Rode uma animação novamente</h2>
+
+<p>A especificação <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> não oferece um modo de rodar uma animação novamente. Não existe um método mágico <code>resetAnimation()</code> nos elementos, e você não pode nem mesmo apenas atribuir o {{cssxref("animation-play-state")}} do elemento para <code>"running"</code> de novo. Ao invés disso, você tem que usar macetes para fazer com que uma animação parada reexecute.</p>
+
+<p>Aqui está um modo de fazer o qual achamos estável e confiável o suficiente para sugerir à você.</p>
+
+<h3 id="Conteúdo_HTML">Conteúdo HTML</h3>
+
+<p>Primeiro, vamos definir o HTML para uma {{HTMLElement("div")}} que gostaríamos de animar e um botão que vai executar (ou reexecutar) a animação.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Clique em mim para rodar a animação&lt;/div&gt;</pre>
+
+<h3 id="Conteúdo_CSS">Conteúdo CSS</h3>
+
+<p>Agora vamos definir a animação em sí usando CSS. Algum CSS que não é importante (o estilo do botão "Rodar" em sí) não é mostrado aqui, por brevidade.</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Existem duas classes aqui. A classe "<code>box</code>" é a descrição básica da aparência da caixa, sem nenhuma informação de animação inclusa. Os detalhes da animação são incluídos na classe "<code>changing</code>", a qual diz que o {{cssxref("@keyframes")}} chamado <code>"colorchange"</code> deveria ser usado no decorrer de dois segundos para animar a caixa.</p>
+
+<p>Perceba que por isso a caixa não começa com nenhum efeito de animação configurado, então não será animada.</p>
+
+<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3>
+
+<p>A seguir vamos olhar para o JavaScript que faz o trabalho. O macete dessa técnica está na função <code>play()</code> , a qual é chamada quando o usuário clica no botão de "rodar".</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Isso parece esquisito, não parece? É porque a única maneira de executar uma animação novamente é removendo o efeito de animação, deixar o documento recomputar os estilos para que ele saiba que você fez isso, e então adicionar o efeito de animação de volta ao elemento. Para fazer isso acontecer temos que ser criativos.</p>
+
+<p>Aqui está o que acontece quando a função <code>play()</code> é chamada:</p>
+
+<ol>
+ <li>The box's list of CSS classes is reset to simply <code>"box"</code>. This has the effect of removing any other classes currently applied to the box, including the <code>"changing"</code> class that handles animation. In other words, we're removing the animation effect from the box. However, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.</li>
+ <li>To be sure that the styles are recalculated, we use {{domxref("window.requestAnimationFrame()")}}, specifying a callback. Our callback gets executed just before the next repaint of the document. The problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet! So...</li>
+ <li>Our callback cleverly calls <code>requestAnimationFrame()</code> a second time! This time, the callback is run before the next repaint, which is after the style recomputation has occurred. This callback adds the <code>"changing"</code> class back onto the box, so that the repaint will start the animation once again.</li>
+</ol>
+
+<p>Claro, também precisamos adicionar um tratador de evento para o nosso botão de "rodar" para que ele de fato faça algo:</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Animações CSS</li>
+ <li>Usando Animações CSS</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/pt-br/web/css/css_animations/usando_animações_css/index.html b/files/pt-br/web/css/css_animations/usando_animações_css/index.html
new file mode 100644
index 0000000000..4bdd91ad9f
--- /dev/null
+++ b/files/pt-br/web/css/css_animations/usando_animações_css/index.html
@@ -0,0 +1,332 @@
+---
+title: Usando animações CSS
+slug: Web/CSS/CSS_Animations/Usando_animações_CSS
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p>Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.</p>
+
+<p>Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:</p>
+
+<ol>
+ <li>São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.</li>
+ <li>As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.</li>
+ <li>Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.</li>
+</ol>
+
+<h2 id="Configurando_a_animação">Configurando a animação</h2>
+
+<p>Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso <strong>não</strong> configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.</p>
+
+<p>As sub-propriedades da propriedade {{cssxref("animation")}} são:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Configura o tempo que uma animação deveria levar para completar um ciclo.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Permite voce pausar e resumir a sequência da animação.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Configura que valores são aplicados pela animação antes e depois de se executar.</dd>
+</dl>
+
+<h2 id="Definindo_a_sequência_de_animação_usando_keyframes">Definindo a sequência de animação usando keyframes</h2>
+
+<p>Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.</p>
+
+<p>Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.</p>
+
+<p>Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<div class="note"><strong>Nota </strong>Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.</div>
+
+<h3 id="Fazendo_o_texto_deslizar_através_da_janela_do_navegador">Fazendo o texto deslizar através da janela do navegador</h3>
+
+<p>Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.</p>
+
+<p>Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}<code>:hidden</code> ao container.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".</p>
+
+<p>Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.</p>
+
+<p>Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.</p>
+
+<p>O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.</p>
+
+<pre class="brush: html"> </pre>
+
+<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.</p>
+
+<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p>
+
+<h3 id="Adicionando_outro_keyframe">Adicionando outro keyframe</h3>
+
+<p>Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden"> </pre>
+
+<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.</p>
+
+<p>Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.</p>
+
+<p>{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}</p>
+
+<h3 id="Faça_repetir-se">Faça repetir-se</h3>
+
+<p>Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar <code>infinite</code> para que a animação se repita indefinidamente:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden"> </pre>
+
+<p>A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.</p>
+
+<p>{{EmbedLiveSample("Faça_repetir-se","100%","250")}}</p>
+
+<h3 id="Fazendo_a_animação_se_mover_para_trás_e_para_frente">Fazendo a animação se mover para trás e para frente</h3>
+
+<p>Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre><code>&lt;p&gt; A Lagarta e Alice olharam-se por algum tempo em silêncio:
+finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
+ela com uma voz lânguida e sonolenta.&lt;/p&gt;</code></pre>
+
+<p>{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}</p>
+
+<h3 id="Usando_eventos_de_animação">Usando eventos de animação</h3>
+
+<p>Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.</p>
+
+<p>Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.</p>
+
+<h4 id="Adicionando_o_CSS">Adicionando o CSS</h4>
+
+<p>Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.</p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+
+<h4 id="Adicionando_animação_a_lista_de_eventos">Adicionando animação a lista de eventos</h4>
+
+<p>Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.</p>
+
+<pre class="brush: js">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+</pre>
+
+<p>Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.</p>
+
+<p>Por que? Porque o evento <code>animationstart</code> dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.</p>
+
+<h4 id="Recebendo_os_eventos">Recebendo os eventos</h4>
+
+<p>Os eventos são entregues à função <code>listener()</code>, a qual é mostrada abaixo.</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.</p>
+
+<p>A saída, quando tudo foi dito e feito, parece com algo assim:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento <code>animationiteration</code> não é enviado; ao invés disso, o evento <code>animationend</code> é enviado.</p>
+
+<h4 id="O_HTML">O HTML</h4>
+
+<p>Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:</p>
+
+<pre class="brush: html"> </pre>
+
+<h1 id="Veja-me_mover">Veja-me mover</h1>
+
+<p>Este exemplo mostra como usar animações CSS para fazer o elemento <code> H1 </code> se mover pela página.</p>
+
+<p>Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.</p>
+
+<ul id="output">
+</ul>
+
+<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detectando suporte de animação CSS</a></li>
+</ul>