Docs: finish translating transitions-overview

Author: viniciusarre

src/guide/transitions-overview.md

@@ -141,74 +141,76 @@ Podemos verificar recursos como [Gatilhos CSS](https://csstriggers.com) para ver
 
 A opacidade se comporta de maneira similar. Assim, são candidatos ideais para movimentos na web.
 
-### Hardware Acceleration
+### Aceleração de Hardware
 
-Properties such as `perspective`, `backface-visibility`, and `transform: translateZ(x)` will allow the browser to know you need hardware acceleration.
+Propriedades como `perspective`, `backface-visibility`, e `transform: translateZ(x)` vão permitir ao browser saber quando se necessite de aceleração de hardware.
+
+Se você gostaria de acelerar o hardware de um elemento, você pode aplicar qualquer uma dessas propriedades (não necessariamente só uma):
 
-If you wish to hardware-accelerate an element, you can apply any of these properties (not all are necessary, only one):
 
 ```css
 perspective: 1000px;
 backface-visibility: hidden;
 transform: translateZ(0);
 ```
+Muitas bibliotecas JS como GreenSock vão assumir que você quer aceleração de hardware e as vão aplicar por padrão, assim você não precisa configurar-las manualmente.
+
 
-Many JS libraries like GreenSock will assume you want hardware acceleration and will apply them by default, so you do not need to set them manually.
+## Tempo de Animação
 
-## Timing
+Para transições de UI simples, de um estado para outro sem estados intermediários, é comum usar tempos entre 0.1s e 0.4s, e muitas pessoas acham que _0.25s_ tende a ser o ponto certo. Você pode usar este tempo para tudo? Não necessáriamente. Se você tem algo que precisa se mover uma distância maior ou que tenha mais passos ou mudanças de estado, 0.25s não vai funcionar tão bem e você terá que ser muito mais intencional, e o tempo terá a necessidade de ser mais único. O que não significa que você pode ter ótimos padrões que você repete dentro da sua aplicação. 
 
-For simple UI transitions, meaning from just one state to another with no intermediary states, it's common to use timings between 0.1s and 0.4s, and most folks find that _0.25s_ tends to be a sweet spot. Can you use that timing for everything? No, not really. If you have something that needs to move a greater distance or has more steps or state changes, 0.25s is not going to work as well and you will have to be much more intentional, and the timing will need to be more unique. That doesn't mean you can't have nice defaults that you repeat within your application, though.
+Você também pode se dar conta de que entradas têm uma aparência melhor com um pouco mais de tempo que uma saída. O usuário tipicamente está sendo guiado durante uma entrada e é um pouco menos paciente na saída, por que querem seguir seu caminho.
 
-You may also find that entrances look better with slightly more time than an exit. The user typically is being guided during the entrance, and is a little less patient upon exit because they want to go on their way.
 
-## Easing
+## Atenuação
 
-Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation have is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite.
+A atenuação é um modo importante de transmitir profundidade em uma animação. Um dos erros mais comuns que novatos em animação é usar `ease-in` para entradas, e `ease-out` para saídas. Quando, na verdade, você vai precisar do oposto. 
 
-If we were to apply these states to a transition, it would look something like this:
+Se tivéssemos que aplicar estes estados a uma transição, ela ficaria algo assim:
 
 ```css
 .button {
   background: #1b8f5a;
-  /* applied to the initial state, so this transition will be applied to the return state */
+  /* aplicada ao estado inicial, assim esta transição será aplicada para o estado de retorno */
   transition: background 0.25s ease-in;
 }
 
 .button:hover {
   background: #3eaf7c;
-  /* applied to the hover state, so this transition will be applied when a hover is triggered */
+  /* aplicada ao estado de hover, assim esta transição será aplicada quando um hover é acionado. */
   transition: background 0.35s ease-out;
 }
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="996a9665131e7902327d350ca8a655ac" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Ease Example">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/996a9665131e7902327d350ca8a655ac">
-  Transition Ease Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="996a9665131e7902327d350ca8a655ac" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Exemplo de transição atenuada">
+  <span>Olhe o Pen <a href="https://codepen.io/team/Vue/pen/996a9665131e7902327d350ca8a655ac">
+  Exemplo de transição atenuada</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-Easing can also convey the quality of material being animated. Take this pen for example, which ball do you think is hard and which is soft?
+A atenuação pode inclusive transmitir a qualidade do material sendo animado. Olhe este pen, por exemplo, qual bola você acha que é rígida e qual é macia? 
 
-<p class="codepen" data-height="500" data-theme-id="39028" data-default-tab="result" data-user="sdras" data-slug-hash="zxJWBJ" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Bouncing Ball Demo">
-  <span>See the Pen <a href="https://codepen.io/sdras/pen/zxJWBJ">
-  Bouncing Ball Demo</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
+<p class="codepen" data-height="500" data-theme-id="39028" data-default-tab="result" data-user="sdras" data-slug-hash="zxJWBJ" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Demo de bola quicando">
+  <span>Veja o Pen <a href="https://codepen.io/sdras/pen/zxJWBJ">
+ Demo de Bola Quicando</a> por Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>)
+  no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
+Você pode obter muitos efeitos únicos e fazer sua animação bem estilosa ajustando sua acentuação. O CSS lhe permite modificar isso ajustando uma propriedade bezier cúbica, [este playground](https://cubic-bezier.com/#.17,.67,.83,.67) por Lea Verou é muito útil para explorar isso.
 
-Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance.
+Apesar de que você possa alcançar grandes efeitos de animações simples com os dois handles que a acentuação por bezier-cúbico oferece, Javascript permite múltiples handles, e portanto, permite muito mais variação.
 
-![Ease Comparison](/images/css-vs-js-ease.svg)
+![Comparação de acentuação](/images/css-vs-js-ease.svg)
 
-Take a bounce, for instance. In CSS we have to declare each keyframe, up and down. In JavaScript, we can express all of that movement within the ease, by declaring `bounce` in the [GreenSock API (GSAP)](https://greensock.com/) (other JS libraries have other types of easing defaults).
+Tomemos um efeito de salto, por exemplo. Em CSS temos que declarar cada keyframe, para cima e para baixo. Em JavaScript, podemos expressar todo o movimento dentro da acentuação declarando `bounce` na [API GreenSock (GSAP)](https://greensock.com/)(outras bibliotecas JS têm outros tipos de padrões de acentuação).
 
-Here is the code used for a bounce in CSS (example from animate.css):
+Aqui está o código usado para o salto em CSS (exemplo de animate.css):
 
 ```css
-@keyframes bounceInDown {
+@keyframes saltoParaBaixo {
   from,
   60%,
   75%,
@@ -240,20 +242,19 @@ Here is the code used for a bounce in CSS (example from animate.css):
   }
 }
 
-.bounceInDown {
-  animation-name: bounceInDown;
+.saltoParaBaixo {
+  animation-name: saltoParaBaixo;
 }
 ```
-
-And here is the same bounce in JS using GreenSock:
+E aqui está o mesmo salto em JS usando GreenSock:
 
 ```js
 gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 })
 ```
 
-We'll be using GreenSock in some of the examples in the sections following. They have a great [ease visualizer](https://greensock.com/ease-visualizer) that will help you build nicely crafted eases.
+Vamos usar o GreenSock para alguns dos exemplos nas seções seguintes. Eles têm um ótimo [visualizador de atenuação](https://greensock.com/ease-visualizer) que vai lhe permitir construir atenuações bem trabalhadas. 
 
-## Further Reading
+## Leituras adicionais
 
-- [Designing Interface Animation: Improving the User Experience Through Animation by Val Head](https://www.amazon.com/dp/B01J4NKSZA/)
+- [Designing Interface Animation: Improving the User Experience Through Animation by Val Head](https://www.amazon.com.br/dp/B01J4NKSZA)
 - [Animation at Work by Rachel Nabors](https://abookapart.com/products/animation-at-work)