Merge pull request #128 from mauehara/css-animations

CSS-animations

Author: wnleao

7-animation/2-css-animations/1-animate-logo-css/solution.md

@@ -1,17 +1,17 @@
 
-CSS to animate both `width` and `height`:
+CSS para animar ambos `width` e `height`:
 ```css
-/* original class */
+/* classe original */
 
 #flyjet {
   transition: all 3s;
 }
 
-/* JS adds .growing */
+/* JS insere .growing */
 #flyjet.growing {
   width: 400px;
   height: 240px;
 }
 ```
 
-Please note that `transitionend` triggers two times -- once for every property. So if we don't perform an additional check then the message would show up 2 times.
+Por favor, note que `transitionend` é disparado duas vezes -- uma vez para cada propriedade. Então, se não perfomarmos uma verificação adicional, a mensagem será exibida 2 vezes.

7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html

@@ -34,7 +34,7 @@
       flyjet.addEventListener('transitionend', function() {
         if (!ended) {
           ended = true;
-          alert('Done!');
+          alert('Feito!');
         }
       });
 

7-animation/2-css-animations/1-animate-logo-css/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Animate a plane (CSS)
+# Anime um avião (CSS)
 
-Show the animation like on the picture below (click the plane):
+Mostre a animação como na imagem abaixo (clique no avião para ver):
 
 [iframe src="solution" height=300]
 
-- The picture grows on click from `40x24px` to `400x240px` (10 times larger).
-- The animation takes 3 seconds.
-- At the end output: "Done!".
-- During the animation process, there may be more clicks on the plane. They shouldn't "break" anything.
+- A imagem cresce após o clique de `40x24px` para `400x240px` (10 vezes maior).
+- A animação dura 3 segundos.
+- Ao final exibimos: "Feito!".
+- Durante a animação, talvez haja mais cliques no avião. Eles não devem "quebrar" nada.

7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md

@@ -1,7 +1,7 @@
-We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out".
+Precisamos escolher a curva Bezier certa para essa animação. Ela deve ter `y>1` em algum lugar para que o avião *jump out* (pule fora).
 
-For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+Por exemplo, podemos configurar ambos os pontos de controle com `y>1`, como: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 
-The graph:
+O gráfico:
 
 ![](bezier-up.svg)

7-animation/2-css-animations/2-animate-logo-bezier-css/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the flying plane (CSS)
+# Anime o avião voador (CSS)
 
-Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than it's original size 400x240px (jump out), and then return to that size.
+Modifique a tarefa anterior <info:task/animate-logo-css> para fazer com que o avião cresça mais que seu tamanho original 400x240px (*jump out*), e depois retornar ao tamanho original.
 
-Here's how it should look (click on the plane):
+Ele deve se comportar assim (clique no avião para ver):
 
 [iframe src="solution" height=350]
 
-Take the solution of the previous task as the source.
+Use a solução da tarefa anterior como fonte.

7-animation/2-css-animations/3-animate-circle/task.md

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Animated circle
+# Círculo animado
 
-Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
+Crie uma função `showCircle(cx, cy, radius)` que mostre um círculo animado crescendo.
 
-- `cx,cy` are window-relative coordinates of the center of the circle,
-- `radius` is the radius of the circle.
+- `cx,cy` são coordenadas do centro do círculo relativas à janela do navegador,
+- `radius` é o raio do círculo.
 
-Click the button below to see how it should look like:
+Clique no botão abaixo para ver como a animação se comporta:
 
 [iframe src="solution" height=260]
 
-The source document has an example of a circle with right styles, so the task is precisely to do the animation right.
+A fonte do documento possui um exemplo de um círculo com os estilos certos, a tarefa é justamente fazer a animação corretamente.