Jun 7, 2020 · Oct 5, 2019 · Dec 22, 2019 · Jun 7, 2020 · Jun 7, 2020 · Jun 7, 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 tanto `width`como `height`:
 ```css
 /*original class */
 /*clase original */

 #flyjet {
  transition: all 3s;
 }

 /* JSadds .growing */
 /* JSañade .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.
 Ten en cuenta que`transitionend`se dispara dos veces, una para cada propiedad. Entonces, si no realizamos una verificación adicional, el mensaje aparecería 2 veces.
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)
 #Animar un avión (CSS)

 Show the animation like on the picture below (click the plane):
 Muestra la animación como en la imagen a continuación (haz clic en el avión):

 [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.
 -La imagen crece al hacer clic de`40x24px`a `400x240px` (10veces más grande).
 -La animación dura 3segundos.
 -Al final muestra: "¡Listo!".
 -Durante el proceso de animación, puede haber más clics en el avión. No deberían "romper" 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 right Bezier curve for that animation. It should have`y>1`somewhere for the plane to "jump out".
 Necesitamos elegir la curva de Bézier correcta para esa animación. Debe tener`y>1`en algún punto para que el avión "salte".

 For instance, we can take bothcontrolpoints with`y>1`,like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 Por ejemplo, podemos tomar ambos puntos decontrolcon`y>1`,como: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.

 The graph:
 La gráfica:

 ![](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)
 #Animar el avión volando (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.
 Modifica la solución de la tarea anterior <info:task/animate-logo-css>para hacer que el avión crezca más que su tamaño original400x240px (saltar fuera),y luego vuelva a ese tamaño.

 Here's how it should look (click on the plane):
 Así es como debería verse (haz clic en el avión):

 [iframe src="solution" height=350]

 Take the solution of the previous task as the source.
 Toma la solución de la tarea anterior como punto de partida.
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.
 Crea una función `showCircle(cx, cy, radius)`que muestre un círculo animado creciendo.

 - `cx,cy`are window-relative coordinates of the center of the circle,
 - `radius`is the radius of the circle.
 - `cx,cy`son coordenadas relativas a la ventana del centro del círculo,
 - `radius`es el radio del círculo.

 Click the button below to see how it should look like:
 Haz clic en el botón de abajo para ver cómo debería verse:

 [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.
 El documento fuente tiene un ejemplo de un círculo con estilos correctos, por lo que la tarea es precisamente hacer la animación correctamente.
Original file line number	Diff line number	Diff line change
		@@ -1,17 +1,17 @@

		CSSto animate both `width`and `height`:
		CSSpara animar tanto `width`como `height`:
		```css
		/original class /
		/clase original /

		#flyjet {
		transition: all 3s;
		}

		/* JSadds .growing */
		/* JSañade .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.
		Ten en cuenta que`transitionend`se dispara dos veces, una para cada propiedad. Entonces, si no realizamos una verificación adicional, el mensaje aparecería 2 veces.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,13 +2,13 @@ importance: 5

		---

		#Animate a plane (CSS)
		#Animar un avión (CSS)

		Show the animation like on the picture below (click the plane):
		Muestra la animación como en la imagen a continuación (haz clic en el avión):

		[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.
		-La imagen crece al hacer clic de`40x24px`a `400x240px` (10veces más grande).
		-La animación dura 3segundos.
		-Al final muestra: "¡Listo!".
		-Durante el proceso de animación, puede haber más clics en el avión. No deberían "romper" nada.
tambaqui marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
		@@ -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".
		Necesitamos elegir la curva de Bézier correcta para esa animación. Debe tener`y>1`en algún punto para que el avión "salte".

		For instance, we can take bothcontrolpoints with`y>1`,like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
		Por ejemplo, podemos tomar ambos puntos decontrolcon`y>1`,como: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.

		The graph:
		La gráfica:

		![](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)
		#Animar el avión volando (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.
		Modifica la solución de la tarea anterior <info:task/animate-logo-css>para hacer que el avión crezca más que su tamaño original400x240px (saltar fuera),y luego vuelva a ese tamaño.

		Here's how it should look (click on the plane):
		Así es como debería verse (haz clic en el avión):

		[iframe src="solution" height=350]

		Take the solution of the previous task as the source.
		Toma la solución de la tarea anterior como punto de partida.
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.
		Crea una función `showCircle(cx, cy, radius)`que muestre un círculo animado creciendo.

		- `cx,cy`are window-relative coordinates of the center of the circle,
		- `radius`is the radius of the circle.
		- `cx,cy`son coordenadas relativas a la ventana del centro del círculo,
		- `radius`es el radio del círculo.

		Click the button below to see how it should look like:
		Haz clic en el botón de abajo para ver cómo debería verse:

		[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.
		El documento fuente tiene un ejemplo de un círculo con estilos correctos, por lo que la tarea es precisamente hacer la animación correctamente.