From d698804c509649a2ee31ee3478dc315ee88aceae Mon Sep 17 00:00:00 2001
From: Raul FS <rfsolana@gmail.com>
Date: Sat, 5 Oct 2019 18:56:07 +0200
Subject: [PATCH 1/9] CSS Animations chapter translation

---
 .../1-animate-logo-css/solution.md            |   8 +-
 .../1-animate-logo-css/task.md                |  12 +-
 .../2-animate-logo-bezier-css/solution.md     |   6 +-
 .../2-animate-logo-bezier-css/task.md         |   8 +-
 .../2-css-animations/3-animate-circle/task.md |  12 +-
 7-animation/2-css-animations/article.md       | 254 +++++++++---------
 .../2-css-animations/boat.view/index.html     |   2 +-
 .../digits-negative-delay.view/index.html     |   2 +-
 .../2-css-animations/digits.view/index.html   |   2 +-
 .../2-css-animations/step-end.view/index.html |   2 +-
 .../2-css-animations/step.view/index.html     |   2 +-
 11 files changed, 155 insertions(+), 155 deletions(-)

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
index 7aa7ca728..04991519a 100644
--- a/7-animation/2-css-animations/1-animate-logo-css/solution.md
+++ b/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 tanto `width` como `height`:
 ```css
-/* original class */
+/* clase original */
 
 #flyjet {
   transition: all 3s;
 }
 
-/* JS adds .growing */
+/* JS añ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
index ed10d4ace..33a341fa4 100644
--- a/7-animation/2-css-animations/1-animate-logo-css/task.md
+++ b/7-animation/2-css-animations/1-animate-logo-css/task.md
@@ -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` (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.
+- La imagen crece al hacer clic de `40x24px` a `400x240px` (10 veces más grande).
+- La animación dura 3 segundos.
+- Al final da la salida: "¡Listo!".
+- Durante el proceso de animación, puede haber más clics en el avión. No deberían "romper" nada.
\ No newline at end of file
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
index 88105399c..cd60c4974 100644
--- 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
@@ -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 fuera".
 
-For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+Por ejemplo, podemos tomar ambos puntos de control con `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
index 9e21f4101..8e2ab67df 100644
--- 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
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the flying plane (CSS)
+# Animar el avión volador (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.
+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 original 400x240px (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
index 83bbb3e84..0856bc50a 100644
--- a/7-animation/2-css-animations/3-animate-circle/task.md
+++ b/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.
+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.
diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 844a27587..681285e35 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -1,16 +1,16 @@
-# CSS-animations
+# Animaciones CSS
 
-CSS animations allow to do simple animations without JavaScript at all.
+Las animaciones CSS permiten hacer animaciones simples sin JavaScript en absoluto.
 
-JavaScript can be used to control CSS animation and make it even better with a little of code.
+Se puede utilizar JavaScript para controlar la animación CSS y mejorarla con un poco de código.
 
-## CSS transitions [#css-transition]
+## Transiciones CSS [#css-transition]
 
-The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation.
+La idea de las transiciones CSS es simple. Describimos una propiedad y cómo se deberían animar sus cambios. Cuando la propiedad cambia, el navegador pinta la animación.
 
-That is: all we need is to change the property. And the fluent transition is made by the browser.
+Es decir: todo lo que necesitamos es cambiar la propiedad. Y la transición fluida es realizada por el navegador.
 
-For instance, the CSS below animates changes of `background-color` for 3 seconds:
+Por ejemplo, el CSS a continuación anima los cambios de `background-color` durante 3 segundos:
 
 ```css
 .animated {
@@ -19,12 +19,12 @@ For instance, the CSS below animates changes of `background-color` for 3 seconds
 }
 ```
 
-Now if an element has `.animated` class, any change of `background-color` is animated during 3 seconds.
+Ahora, si un elemento tiene la clase `.animated`, cualquier cambio de `background-color` es animado durante 3 segundos.
 
-Click the button below to animate the background:
+Haz clic en el botón de abajo para animar el fondo:
 
 ```html run autorun height=60
-<button id="color">Click me</button>
+<button id="color">Haz clic en mi</button>
 
 <style>
   #color {
@@ -40,19 +40,19 @@ Click the button below to animate the background:
 </script>
 ```
 
-There are 4 properties to describe CSS transitions:
+Hay 4 propiedades para describir las transiciones CSS:
 
 - `transition-property`
 - `transition-duration`
 - `transition-timing-function`
 - `transition-delay`
 
-We'll cover them in a moment, for now let's note that the common `transition` property allows to declare them together in the order: `property duration timing-function delay`, and also animate multiple properties at once.
+Las cubriremos en un momento, por ahora tengamos en cuenta que la propiedad común `transition` permite declararlas juntas en el orden: `property duration timing-function delay`, y también animar múltiples propiedades a la vez.
 
-For instance, this button animates both `color` and `font-size`:
+Por ejemplo, este botón anima tanto `color` como `font-size`:
 
 ```html run height=80 autorun no-beautify
-<button id="growing">Click me</button>
+<button id="growing">Haz clic en mi</button>
 
 <style>
 #growing {
@@ -70,29 +70,29 @@ growing.onclick = function() {
 </script>
 ```
 
-Now let's cover animation properties one by one.
+Ahora cubramos las propiedades de animación una por una.
 
 ## transition-property
 
-In `transition-property` we write a list of property to animate, for instance: `left`, `margin-left`, `height`, `color`.
+En `transition-property` escribimos una lista de propiedades para animar, por ejemplo: `left`, `margin-left`, `height`, `color`.
 
-Not all properties can be animated, but [many of them](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties".
+No todas las propiedades pueden ser animadas, pero [muchas de ellas](http://www.w3.org/TR/css3-transitions/#animatable-properties-). El valor `all` significa "animar todas las propiedades".
 
 ## transition-duration
 
-In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](http://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
+En `transition-duration` podemos especificar cuánto tiempo debe durar la animación. El tiempo debe estar en [formato de tiempo CSS](http://www.w3.org/TR/css3-values/#time): en segundos `s` o milisegundos `ms`.
 
 ## transition-delay
 
-In `transition-delay` we can specify the delay *before* the animation. For instance, if  `transition-delay: 1s`, then animation starts after 1 second after the change.
+En `transition-delay` podemos especificar el retraso *antes* de la animación. Por ejemplo, si `transition-delay: 1s`, la animación comienza después de 1 segundo tras el cambio.
 
-Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the half.
+Los valores negativos también son posibles. Entonces la animación comienza desde el medio. Por ejemplo, si `transition-duration` es `2s`, y el retraso es `-1s`, entonces la animación toma 1 segundo y comienza desde la mitad.
 
-Here's the animation shifts numbers from `0` to `9` using CSS `translate` property:
+Aquí la animación cambia los números de `0` a `9` usando la propiedad CSS `translate`:
 
 [codetabs src="digits"]
 
-The `transform` property is animated like this:
+La propiedad `transform` se anima así:
 
 ```css
 #stripe.animate {
@@ -102,25 +102,25 @@ The `transform` property is animated like this:
 }
 ```
 
-In the example above JavaScript adds the class `.animate` to the element -- and the animation starts:
+En el ejemplo anterior, JavaScript agrega la clase `.animate` al elemento, y comienza la animación:
 
 ```js
 stripe.classList.add('animate');
 ```
 
-We can also start it "from the middle", from the exact number, e.g. corresponding to the current second, using the negative `transition-delay`.
+También podemos comenzar "desde el medio", desde el número exacto, p. ej. correspondiente al segundo actual, usando el negativo `transition-delay`.
 
-Here if you click the digit -- it starts the animation from the current second:
+Aquí, si haces clic en el dígito, comienza la animación desde el segundo actual:
 
 [codetabs src="digits-negative-delay"]
 
-JavaScript does it by an extra line:
+JavaScript lo hace por una línea extra:
 
 ```js
 stripe.onclick = function() {
   let sec = new Date().getSeconds() % 10;
 *!*
-  // for instance, -3s here starts the animation from the 3rd second
+  // por ejemplo, -3s aquí comienza la animación desde el 3er segundo
   stripe.style.transitionDelay = '-' + sec + 's';
 */!*
   stripe.classList.add('animate');
@@ -129,60 +129,60 @@ stripe.onclick = function() {
 
 ## transition-timing-function
 
-Timing function describes how the animation process is distributed along the time. Will it start slowly and then go fast or vise versa.
+La función de temporización describe cómo se distribuye el proceso de animación a lo largo del tiempo. Comenzará lentamente y luego irá rápido o viceversa.
 
-That's the most complicated property from the first sight. But it becomes very simple if we devote a bit time to it.
+Es la propiedad más complicada a primera vista. Pero se vuelve muy simple si le dedicamos un poco de tiempo.
 
-That property accepts two kinds of values: a Bezier curve or steps. Let's start from the curve, as it's used more often.
+Esa propiedad acepta dos tipos de valores: una curva de Bézier o pasos. Comencemos por la curva, ya que se usa con más frecuencia.
 
-### Bezier curve
+### Curva de Bézier
 
-The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfies the conditions:
+La función de temporización se puede establecer como una [curva de Bézier](/bezier-curve) con 4 puntos de control que satisfacen las condiciones:
 
-1. First control point: `(0,0)`.
-2. Last control point: `(1,1)`.
-3. For intermediate points values of `x` must be in the interval `0..1`, `y` can be anything.
+1. Primer punto de control: `(0,0)`.
+2. Último punto de control: `(1,1)`.
+3. Para los puntos intermedios, los valores de `x` deben estar en el intervalo `0..1`, `y` puede ser cualquier cosa.
 
-The syntax for a Bezier curve in CSS: `cubic-bezier(x2, y2, x3, y3)`. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to `(0,0)` and the 4th one is `(1,1)`.
+La sintaxis de una curva de Bézier en CSS: `cubic-bezier(x2, y2, x3, y3)`. Aquí necesitamos especificar solo los puntos de control segundo y tercero, porque el primero está fijado a `(0,0)` y el cuarto es `(1,1)`.
 
-The timing function describes how fast the animation process goes in time.
+La función de temporización describe como de rápido pasa en el tiempo el proceso de animación.
 
-- The `x` axis is the time: `0` -- the starting moment, `1` -- the last moment of `transition-duration`.
-- The `y` axis specifies the completion of the process: `0` -- the starting value of the property, `1` -- the final value.
+- El eje `x` es el tiempo: `0` -- el momento inicial, `1` -- el último momento de `transition-duration`.
+- El eje `y` especifica la finalización del proceso: `0` -- el valor inicial de la propiedad, `1` -- el valor final.
 
-The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve `cubic-bezier(0, 0, 1, 1)`.
+La variante más simple es cuando la animación es uniforme, con la misma velocidad lineal. Eso puede especificarse mediante la curva `cubic-bezier(0, 0, 1, 1)`.
 
-Here's how that curve looks:
+Así es como se ve esa curva:
 
 ![](bezier-linear.svg)
 
-...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`.
+... Como podemos ver, es solo una línea recta. A medida que pasa el tiempo (`x`), la finalización (`y`) de la animación pasa constantemente de `0` a` 1`.
 
-The train in the example below goes from left to right with the permanent speed (click it):
+El tren, en el ejemplo a continuación, va de izquierda a derecha con velocidad constante (haz clic en él):
 
 [codetabs src="train-linear"]
 
-The CSS `transition` is based on that curve:
+La `transition` de CSS se basa en esa curva:
 
 ```css
 .train {
   left: 0;
   transition: left 5s cubic-bezier(0, 0, 1, 1);
-  /* JavaScript sets left to 450px */
+  /* JavaScript establece left a 450px */
 }
 ```
 
-...And how can we show a train slowing down?
+... ¿Y cómo podemos mostrar un tren desacelerando?
 
-We can use another Bezier curve: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
+Podemos usar otra curva de Bézier: `cubic-bezier(0.0, 0.5, 0.5, 1.0)`.
 
-The graph:
+La gráfica:
 
 ![](train-curve.svg)
 
-As we can see, the process starts fast: the curve soars up high, and then slower and slower.
+Como podemos ver, el proceso comienza rápido: la curva se eleva mucho, y luego más y más despacio.
 
-Here's the timing function in action (click the train):
+Aquí está la función de temporización en acción (haz clic en el tren):
 
 [codetabs src="train"]
 
@@ -191,24 +191,24 @@ CSS:
 .train {
   left: 0;
   transition: left 5s cubic-bezier(0, .5, .5, 1);
-  /* JavaScript sets left to 450px */
+  /* JavaScript establece left a 450px */
 }
 ```
 
-There are several built-in curves: `linear`, `ease`, `ease-in`, `ease-out` and `ease-in-out`.
+Hay varias curvas incorporadas: `linear`,` ease`, `ease-in`,` ease-out` y `ease-in-out`.
 
-The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, we saw it already.
+La `linear` es una abreviatura de `cubic-bezier(0, 0, 1, 1) ` -- una línea recta, como ya vimos.
 
-Other names are shorthands for the following `cubic-bezier`:
+Otros nombres son abreviaturas para la siguiente `cubic-bezier`:
 
 | <code>ease</code><sup>*</sup> | <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> |
 |-------------------------------|----------------------|-----------------------|--------------------------|
 | <code>(0.25, 0.1, 0.25, 1.0)</code> | <code>(0.42, 0, 1.0, 1.0)</code> | <code>(0, 0, 0.58, 1.0)</code> | <code>(0.42, 0, 0.58, 1.0)</code> |
 | ![ease, figure](ease.svg) | ![ease-in, figure](ease-in.svg) | ![ease-out, figure](ease-out.svg) | ![ease-in-out, figure](ease-in-out.svg) |
 
-`*` -- by default, if there's no timing function, `ease` is used.
+`*` -- por defecto, si no hay una función de temporización, se utiliza `ease`.
 
-So we could use `ease-out` for our slowing down train:
+Por lo tanto, podríamos usar `ease-out` para nuestro tren desacelerando:
 
 
 ```css
@@ -219,56 +219,56 @@ So we could use `ease-out` for our slowing down train:
 }
 ```
 
-But it looks a bit differently.
+Pero se ve un poco diferente.
 
-**A Bezier curve can make the animation "jump out" of its range.**
+**Una curva de Bézier puede hacer que la animación "salte fuera" de su rango.**
 
-The control points on the curve can have any `y` coordinates: even negative or huge. Then the Bezier curve would also jump very low or high, making the animation go beyond its normal range.
+Los puntos de control en la curva pueden tener cualquier coordenada `y`: incluso negativa o enorme. Entonces la curva de Bézier también saltaría muy bajo o alto, haciendo que la animación vaya más allá de su rango normal.
 
-In the example below the animation code is:
+En el siguiente ejemplo, el código de animación es:
 ```css
 .train {
   left: 100px;
   transition: left 5s cubic-bezier(.5, -1, .5, 2);
-  /* JavaScript sets left to 400px */
+  /* JavaScript establece left a 400px */
 }
 ```
 
-The property `left` should animate from `100px` to `400px`.
+La propiedad `left` debería animarse de `100px` a `400px`.
 
-But if you click the train, you'll see that:
+Pero si haces clic en el tren, verás que:
 
-- First, the train goes *back*: `left` becomes less than `100px`.
-- Then it goes forward, a little bit farther than `400px`.
-- And then back again -- to `400px`.
+- Primero, el tren va *atrás*: `left` llega a ser menor que `100px`.
+- Luego avanza, un poco más allá de `400px`.
+- Y luego de vuelve a `400px`.
 
 [codetabs src="train-over"]
 
-Why it happens -- pretty obvious if we look at the graph of the given Bezier curve:
+¿Por qué sucede? es bastante obvio si miramos el gráfico de la curva de Bézier dada:
 
 ![](bezier-train-over.svg)
 
-We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`.
+Movimos la coordenada `y` del segundo punto por debajo de cero, y para el tercer punto lo colocamos sobre `1`, de modo que la curva sale del cuadrante "regular". La `y` está fuera del rango "estándar" `0..1`.
 
-As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property lower than the starting `left` and `y>1` -- over the final `left`.
+Como sabemos, `y` mide "la finalización del proceso de animación". El valor `y = 0` corresponde al valor inicial de la propiedad e `y = 1` al valor final. Por lo tanto, los valores `y<0` mueven la propiedad por debajo del `left` inicial e `y>1` por encima del `left` final.
 
-That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more.
+Esa es una variante "suave" sin duda. Si ponemos valores `y` como `-99` y `99`, entonces el tren saltaría mucho más fuera del rango.
 
-But how to make the Bezier curve for a specific task? There are many tools. For instance, we can do it on the site <http://cubic-bezier.com/>.
+Pero, ¿cómo hacer la curva de Bézier para una tarea específica? Hay muchas herramientas. Por ejemplo, podemos hacerlo en el sitio <http://cubic-bezier.com/>.
 
-### Steps
+### Pasos
 
-Timing function `steps(number of steps[, start/end])` allows to split animation into steps.
+La función de temporización `steps(number of steps[, start/end])` permite dividir la animación en pasos.
 
-Let's see that in an example with digits.
+Veamos eso en un ejemplo con dígitos.
 
-Here's a list of digits, without any animations, just as a source:
+Aquí tenemos una lista de dígitos, sin animaciones, solo como fuente:
 
 [codetabs src="step-list"]
 
-We'll make the digits appear in a discrete way by making the part of the list outside of the red "window" invisible and shifting the list to the left with each step.
+Haremos que los dígitos aparezcan de manera discreta haciendo invisible la parte de la lista fuera de la "ventana" roja y desplazando la lista a la izquierda con cada paso.
 
-There will be 9 steps, a step-move for each digit:
+Habrá 9 pasos, un paso para cada dígito:
 
 ```css
 #stripe.animate  {
@@ -277,58 +277,58 @@ There will be 9 steps, a step-move for each digit:
 }
 ```
 
-In action:
+En acción:
 
 [codetabs src="step"]
 
-The first argument of `steps(9, start)` is the number of steps. The transform will be split into 9 parts (10% each). The time interval is automatically divided into 9 parts as well, so `transition: 9s` gives us 9 seconds for the whole animation – 1 second per digit.
+El primer argumento de `steps(9, start)` es el número de pasos. La transformación se dividirá en 9 partes (10% cada una). El intervalo de tiempo también se divide automáticamente en 9 partes, por lo que `transition: 9s` nos da 9 segundos para toda la animación: 1 segundo por dígito.
 
-The second argument is one of two words: `start` or `end`.
+El segundo argumento es una de dos palabras: `start` o `end`.
 
-The `start` means that in the beginning of animation we need to do make the first step immediately.
+El `start` significa que al comienzo de la animación debemos hacer el primer paso de inmediato.
 
-We can observe that during the animation: when we click on the digit it changes to `1` (the first step) immediately, and then changes in the beginning of the next second.
+Podemos observar eso durante la animación: cuando hacemos clic en el dígito, cambia a `1` (el primer paso) inmediatamente, y luego cambia al comienzo del siguiente segundo.
 
-The process is progressing like this:
+El proceso está progresando así:
 
-- `0s` -- `-10%` (first change in the beginning of the 1st second, immediately)
+- `0s` -- `-10%` (primer cambio al comienzo del primer segundo, inmediatamente)
 - `1s` -- `-20%`
 - ...
 - `8s` -- `-80%`
-- (the last second shows the final value).
+- (el último segundo muestra el valor final)
 
-The alternative value `end` would mean that the change should be applied not in the beginning, but at the end of each second.
+El valor alternativo 'end' significaría que el cambio debe aplicarse no al principio, sino al final de cada segundo.
 
-So the process would go like this:
+Entonces el proceso sería así:
 
 - `0s` -- `0`
-- `1s` -- `-10%` (first change at the end of the 1st second)
+- `1s` -- `-10%` (primer cambio al final del primer segundo)
 - `2s` -- `-20%`
 - ...
 - `9s` -- `-90%`
 
-Here's `step(9, end)` in action (note the pause between the first digit change):
+Aquí está el `step(9, end)` en acción (observa la pausa entre el primer cambio de dígitos):
 
 [codetabs src="step-end"]
 
-There are also shorthand values:
+También hay valores abreviados:
 
-- `step-start` -- is the same as `steps(1, start)`. That is, the animation starts immediately and takes 1 step. So it starts and finishes immediately, as if there were no animation.
-- `step-end` -- the same as `steps(1, end)`: make the animation in a single step at the end of `transition-duration`.
+- `step-start` -- es lo mismo que` steps(1, start)`. Es decir, la animación comienza de inmediato y toma 1 paso. Entonces comienza y termina inmediatamente, como si no hubiera animación.
+- `step-end` -- lo mismo que `steps(1, end)`: realiza la animación en un solo paso al final de `transition-duration`.
 
-These values are rarely used, because that's not really animation, but rather a single-step change.
+Estos valores rara vez se usan, porque eso no es realmente animación, sino un cambio de un solo paso.
 
-## Event transitionend
+## Evento transitionend
 
-When the CSS animation finishes the `transitionend` event triggers.
+Cuando finaliza la animación CSS, se activa el evento `transitionend`.
 
-It is widely used to do an action after the animation is done. Also we can join animations.
+Es ampliamente utilizado para hacer una acción después de que se realiza la animación. También podemos unir animaciones.
 
-For instance, the ship in the example below starts to swim there and back on click, each time farther and farther to the right:
+Por ejemplo, el barco en el ejemplo a continuación comienza a navegar ida y vuelta al hacer clic, cada vez más y más a la derecha:
 
 [iframe src="boat" height=300 edit link]
 
-The animation is initiated by the function `go` that re-runs each time when the transition finishes and flips the direction:
+La animación se inicia mediante la función `go` que se vuelve a ejecutar cada vez que finaliza la transición y cambia la dirección:
 
 ```js
 boat.onclick = function() {
@@ -337,11 +337,11 @@ boat.onclick = function() {
 
   function go() {
     if (times % 2) {
-      // swim to the right
+      // navegar al a derecha
       boat.classList.remove('back');
       boat.style.marginLeft = 100 * times + 200 + 'px';
     } else {
-      // swim to the left
+      // navegar a la izquierda
       boat.classList.add('back');
       boat.style.marginLeft = 100 * times - 200 + 'px';
     }
@@ -357,40 +357,40 @@ boat.onclick = function() {
 };
 ```
 
-The event object for `transitionend` has few specific properties:
+El objeto de evento para `transitionend` tiene pocas propiedades específicas:
 
 `event.propertyName`
-: The property that has finished animating. Can be good if we animate multiple properties simultaneously.
+: La propiedad que ha terminado de animarse. Puede ser bueno si animamos múltiples propiedades simultáneamente.
 
 `event.elapsedTime`
-: The time (in seconds) that the animation took, without `transition-delay`.
+: El tiempo (en segundos) que duró la animación, sin `transition-delay`.
 
-## Keyframes
+## Fotogramas clave
 
-We can join multiple simple animations together using the `@keyframes` CSS rule.
+Podemos unir múltiples animaciones simples juntas usando la regla CSS `@keyframes`.
 
-It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we attach the animation to the element and specify additional parameters for it.
+Especifica el "nombre" de la animación y las reglas: qué, cuándo y dónde animar. Luego, usando la propiedad `animation`, adjuntamos la animación al elemento y especificamos parámetros adicionales para él.
 
-Here's an example with explanations:
+Aquí tenemos un ejemplo con explicaciones:
 
 ```html run height=60 autorun="no-epub" no-beautify
 <div class="progress"></div>
 
 <style>
 *!*
-  @keyframes go-left-right {        /* give it a name: "go-left-right" */
-    from { left: 0px; }             /* animate from left: 0px */
-    to { left: calc(100% - 50px); } /* animate to left: 100%-50px */
+  @keyframes go-left-right {        /* dale un nombre: "go-left-right" */
+    from { left: 0px; }             /* animar desde la izquierda: 0px */
+    to { left: calc(100% - 50px); } /* animar a la izquierda: 100%-50px */
   }
 */!*
 
   .progress {
 *!*
     animation: go-left-right 3s infinite alternate;
-    /* apply the animation "go-left-right" to the element
-       duration 3 seconds
-       number of times: infinite
-       alternate direction every time
+    /* aplicar la animación "go-left-right" al elemento
+       duración 3 segundos
+       número de veces: infinitas
+       alternar la dirección cada vez
     */
 */!*
 
@@ -403,25 +403,25 @@ Here's an example with explanations:
 </style>
 ```
 
-There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
+Hay muchos artículos sobre `@keyframes` y una [especificación detallada](https://drafts.csswg.org/css-animations/).
 
-Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
+Probablemente no necesitarás `@keyframes` a menudo, a menos que todo esté en constante movimiento en tus sitios.
 
-## Summary
+## Resumen
 
-CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
+Las animaciones CSS permiten animar suavemente (o no) los cambios de una o varias propiedades CSS.
 
-They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
+Son buenas para la mayoría de las tareas de animación. También podemos usar JavaScript para animaciones, el siguiente capítulo está dedicado a eso.
 
-Limitations of CSS animations compared to JavaScript animations:
+Limitaciones de las animaciones CSS en comparación con las animaciones JavaScript:
 
-```compare plus="CSS animations" minus="JavaScript animations"
-+ Simple things done simply.
-+ Fast and lightweight for CPU.
-- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element.
-- Not just property changes. We can create new elements in JavaScript for purposes of animation.
+```comparar más="Animaciones CSS" menos="Animaciones JavaScript"
++ Cosas simples hechas simplemente.
++ Rápido y ligero para la CPU.
+- Las animaciones de JavaScript son flexibles. Pueden implementar cualquier lógica de animación, como una "explosión" de un elemento.
+- No solo cambios de propiedad. Podemos crear nuevos elementos en JavaScript para fines de animación.
 ```
 
-The majority of animations can be implemented using CSS as described in this chapter. And  `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code.
+La mayoría de las animaciones se pueden implementar usando CSS como se describe en este capítulo. Y el evento `transitionend` permite ejecutar JavaScript después de la animación, por lo que se integra bien con el código.
 
-But in the next chapter we'll do some JavaScript animations to cover more complex cases.
+Pero en el próximo capítulo haremos algunas animaciones en JavaScript para cubrir casos más complejos.
diff --git a/7-animation/2-css-animations/boat.view/index.html b/7-animation/2-css-animations/boat.view/index.html
index 60b704262..4bfcfc7eb 100644
--- a/7-animation/2-css-animations/boat.view/index.html
+++ b/7-animation/2-css-animations/boat.view/index.html
@@ -13,7 +13,7 @@
   <script>
     boat.onclick = function() {
 
-      this.onclick = null; // only the first click should start the animation
+      this.onclick = null; // solo el primer clic debe comenzar la animación
 
       let times = 1;
 
diff --git a/7-animation/2-css-animations/digits-negative-delay.view/index.html b/7-animation/2-css-animations/digits-negative-delay.view/index.html
index dbeefaae2..482b38d7d 100644
--- a/7-animation/2-css-animations/digits-negative-delay.view/index.html
+++ b/7-animation/2-css-animations/digits-negative-delay.view/index.html
@@ -8,7 +8,7 @@
 
 <body>
 
-  Click below to animate:
+  Haz clic a continuación para animar:
   <div id="digit"><div id="stripe">0123456789</div></div>
 
   <script src="script.js"></script>
diff --git a/7-animation/2-css-animations/digits.view/index.html b/7-animation/2-css-animations/digits.view/index.html
index a156d8189..a459f0f4c 100644
--- a/7-animation/2-css-animations/digits.view/index.html
+++ b/7-animation/2-css-animations/digits.view/index.html
@@ -8,7 +8,7 @@
 
 <body>
 
-  Click below to animate:
+  Haz clic a continuación para animar:
 
   <div id="digit"><div id="stripe">0123456789</div></div>
 
diff --git a/7-animation/2-css-animations/step-end.view/index.html b/7-animation/2-css-animations/step-end.view/index.html
index 2c8df7275..0f4f85e03 100644
--- a/7-animation/2-css-animations/step-end.view/index.html
+++ b/7-animation/2-css-animations/step-end.view/index.html
@@ -8,7 +8,7 @@
 
 <body>
 
-  Click below to animate:
+  Haz clic a continuación para animar:
 
   <div id="digit"><div id="stripe">0123456789</div></div>
 
diff --git a/7-animation/2-css-animations/step.view/index.html b/7-animation/2-css-animations/step.view/index.html
index 2c8df7275..0f4f85e03 100644
--- a/7-animation/2-css-animations/step.view/index.html
+++ b/7-animation/2-css-animations/step.view/index.html
@@ -8,7 +8,7 @@
 
 <body>
 
-  Click below to animate:
+  Haz clic a continuación para animar:
 
   <div id="digit"><div id="stripe">0123456789</div></div>
 

From a308952b958d1bd026e83881f6ebd146ea030720 Mon Sep 17 00:00:00 2001
From: Raul FS <rfsolana@gmail.com>
Date: Sun, 22 Dec 2019 20:09:30 +0100
Subject: [PATCH 2/9] CSS Animations chapter translation corrections

---
 7-animation/2-css-animations/1-animate-logo-css/task.md   | 2 +-
 .../2-animate-logo-bezier-css/solution.md                 | 2 +-
 7-animation/2-css-animations/article.md                   | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

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
index 33a341fa4..8fbb6c0e0 100644
--- a/7-animation/2-css-animations/1-animate-logo-css/task.md
+++ b/7-animation/2-css-animations/1-animate-logo-css/task.md
@@ -10,5 +10,5 @@ Muestra la animación como en la imagen a continuación (haz clic en el avión):
 
 - La imagen crece al hacer clic de `40x24px` a `400x240px` (10 veces más grande).
 - La animación dura 3 segundos.
-- Al final da la salida: "¡Listo!".
+- Al final muestra: "¡Listo!".
 - Durante el proceso de animación, puede haber más clics en el avión. No deberían "romper" nada.
\ No newline at end of file
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
index cd60c4974..6a15092ae 100644
--- 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
@@ -1,4 +1,4 @@
-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 fuera".
+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".
 
 Por ejemplo, podemos tomar ambos puntos de control con `y>1`, como: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 
diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 681285e35..eea49070f 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -244,7 +244,7 @@ Pero si haces clic en el tren, verás que:
 
 [codetabs src="train-over"]
 
-¿Por qué sucede? es bastante obvio si miramos el gráfico de la curva de Bézier dada:
+¿Por qué sucede? es bastante obvio si miramos la gráfica de la curva de Bézier dada:
 
 ![](bezier-train-over.svg)
 
@@ -295,7 +295,7 @@ El proceso está progresando así:
 - `1s` -- `-20%`
 - ...
 - `8s` -- `-80%`
-- (el último segundo muestra el valor final)
+- (el último segundo muestra el valor final).
 
 El valor alternativo 'end' significaría que el cambio debe aplicarse no al principio, sino al final de cada segundo.
 
@@ -320,9 +320,9 @@ Estos valores rara vez se usan, porque eso no es realmente animación, sino un c
 
 ## Evento transitionend
 
-Cuando finaliza la animación CSS, se activa el evento `transitionend`.
+Cuando finaliza la animación CSS, se dispara el evento `transitionend`.
 
-Es ampliamente utilizado para hacer una acción después de que se realiza la animación. También podemos unir animaciones.
+Es ampliamente utilizado para hacer una acción después que se realiza la animación. También podemos unir animaciones.
 
 Por ejemplo, el barco en el ejemplo a continuación comienza a navegar ida y vuelta al hacer clic, cada vez más y más a la derecha:
 

From 41b55a84b2a8951651a981e4578cafba69217aed Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:42:39 -0400
Subject: [PATCH 3/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index eea49070f..1a50e88fc 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -365,7 +365,7 @@ El objeto de evento para `transitionend` tiene pocas propiedades específicas:
 `event.elapsedTime`
 : El tiempo (en segundos) que duró la animación, sin `transition-delay`.
 
-## Fotogramas clave
+## Fotogramas clave  (Keyframes)
 
 Podemos unir múltiples animaciones simples juntas usando la regla CSS `@keyframes`.
 

From 6ab2c7b0f1ee35ad3ad143178a692e28d2c18137 Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:42:49 -0400
Subject: [PATCH 4/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 1a50e88fc..491db69b2 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -337,7 +337,7 @@ boat.onclick = function() {
 
   function go() {
     if (times % 2) {
-      // navegar al a derecha
+      // navegar a la derecha
       boat.classList.remove('back');
       boat.style.marginLeft = 100 * times + 200 + 'px';
     } else {

From f9e152e90c9acbdb99c6d7e62312176915007c47 Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:43:10 -0400
Subject: [PATCH 5/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 491db69b2..63992ea2d 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -324,7 +324,7 @@ Cuando finaliza la animación CSS, se dispara el evento `transitionend`.
 
 Es ampliamente utilizado para hacer una acción después que se realiza la animación. También podemos unir animaciones.
 
-Por ejemplo, el barco en el ejemplo a continuación comienza a navegar ida y vuelta al hacer clic, cada vez más y más a la derecha:
+Por ejemplo, el barco a continuación comienza a navegar ida y vuelta al hacer clic, cada vez más y más a la derecha:
 
 [iframe src="boat" height=300 edit link]
 

From 6df4b3dc468a538f7848bffe1b40c8cc6f1b55b8 Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:43:20 -0400
Subject: [PATCH 6/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 63992ea2d..aeea14225 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -145,7 +145,7 @@ La función de temporización se puede establecer como una [curva de Bézier](/b
 
 La sintaxis de una curva de Bézier en CSS: `cubic-bezier(x2, y2, x3, y3)`. Aquí necesitamos especificar solo los puntos de control segundo y tercero, porque el primero está fijado a `(0,0)` y el cuarto es `(1,1)`.
 
-La función de temporización describe como de rápido pasa en el tiempo el proceso de animación.
+La función de temporización determina qué tan rápido ocurre el proceso de animación a lo largo del tiempo.
 
 - El eje `x` es el tiempo: `0` -- el momento inicial, `1` -- el último momento de `transition-duration`.
 - El eje `y` especifica la finalización del proceso: `0` -- el valor inicial de la propiedad, `1` -- el valor final.

From 84d231f61038782484d869f2b3af4f23c2f69449 Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:43:30 -0400
Subject: [PATCH 7/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index aeea14225..18fc6f199 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -114,7 +114,7 @@ Aquí, si haces clic en el dígito, comienza la animación desde el segundo actu
 
 [codetabs src="digits-negative-delay"]
 
-JavaScript lo hace por una línea extra:
+JavaScript lo hace con una línea extra:
 
 ```js
 stripe.onclick = function() {

From 1e44ca7e8a0ab52048ebb9d27623ca86ee2cd91b Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:43:39 -0400
Subject: [PATCH 8/9] Update
 7-animation/2-css-animations/2-animate-logo-bezier-css/task.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/2-animate-logo-bezier-css/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 8e2ab67df..c713b202d 100644
--- 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
@@ -2,7 +2,7 @@ importance: 5
 
 ---
 
-# Animar el avión volador (CSS)
+# Animar el avión volando (CSS)
 
 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 original 400x240px (saltar fuera), y luego vuelva a ese tamaño.
 

From 2aedc97e935cbf4ae05131553581593d6b1988fa Mon Sep 17 00:00:00 2001
From: Valentina VP <34555644+vplentinax@users.noreply.github.com>
Date: Sun, 7 Jun 2020 14:43:48 -0400
Subject: [PATCH 9/9] Update 7-animation/2-css-animations/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 7-animation/2-css-animations/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 18fc6f199..1b0c3be27 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -76,7 +76,7 @@ Ahora cubramos las propiedades de animación una por una.
 
 En `transition-property` escribimos una lista de propiedades para animar, por ejemplo: `left`, `margin-left`, `height`, `color`.
 
-No todas las propiedades pueden ser animadas, pero [muchas de ellas](http://www.w3.org/TR/css3-transitions/#animatable-properties-). El valor `all` significa "animar todas las propiedades".
+No todas las propiedades pueden ser animadas, sí [muchas de ellas](http://www.w3.org/TR/css3-transitions/#animatable-properties-). El valor `all` significa "animar todas las propiedades".
 
 ## transition-duration