May 22, 2020 · May 14, 2020 · May 18, 2020
diff --git a/7-animation/2-css-animations/1-animate-logo-css/solution.md b/7-animation/2-css-animations/1-animate-logo-css/solution.md

 CSSto animate both `width`and `height`:
 CSSpara animar ambos `width`e `height`:
 ```css
 /*original class */
 /*classe original */

 #flyjet {
  transition: all 3s;
 }

 /* JSadds .growing */
 /* JSinsere .growing */
 #flyjet.growing {
  width: 400px;
  height: 240px;
 }
 ```

 Pleasenotethat `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,noteque `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.
diff --git a/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html b/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
      flyjet.addEventListener('transitionend', function() {
        if (!ended) {
          ended = true;
          alert('Done!');
          alert('Feito!');
        }
      });

diff --git a/7-animation/2-css-animations/1-animate-logo-css/task.md b/7-animation/2-css-animations/1-animate-logo-css/task.md

 ---

 #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` (10times larger).
 -The animation takes 3seconds.
 -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` (10vezes maior).
 -A animação dura 3segundos.
 -Ao final exibimos: "Feito!".
 -Durante a animação, talvez haja mais cliques no avião. Eles não devem "quebrar" nada.
diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md b/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
 We need to choose the rightBeziercurve for that animation. It should have `y>1`somewhere for the plane to "jump out".
 Precisamos escolher a curvaBeziercerta 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)
diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/task.md b/7-animation/2-css-animations/2-animate-logo-bezier-css/task.md

 ---

 #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 size400x240px (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 original400x240px (*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.
diff --git a/7-animation/2-css-animations/3-animate-circle/task.md b/7-animation/2-css-animations/3-animate-circle/task.md

 ---

 #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.
Original file line number	Diff line number	Diff line change
		@@ -1,17 +1,17 @@

		CSSto animate both `width`and `height`:
		CSSpara animar ambos `width`e `height`:
		```css
		/original class /
		/classe original /

		#flyjet {
		transition: all 3s;
		}

		/* JSadds .growing */
		/* JSinsere .growing */
		#flyjet.growing {
		width: 400px;
		height: 240px;
		}
		```

		Pleasenotethat `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,noteque `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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,7 +34,7 @@
		flyjet.addEventListener('transitionend', function() {
		if (!ended) {
		ended = true;
		alert('Done!');
		alert('Feito!');
		}
		});

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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` (10times larger).
		-The animation takes 3seconds.
		-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` (10vezes maior).
		-A animação dura 3segundos.
		-Ao final exibimos: "Feito!".
		-Durante a animação, talvez haja mais cliques no avião. Eles não devem "quebrar" nada.
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		We need to choose the rightBeziercurve for that animation. It should have `y>1`somewhere for the plane to "jump out".
		Precisamos escolher a curvaBeziercerta 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)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 size400x240px (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 original400x240px (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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.