JavaScript animations

7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,10 +1,10 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+Pour rebondir, nous pouvons utiliser les propriétés CSS `top` et `position:absolute` pour la balle à l'intérieur du champ avec `position:relative`.
 
-The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
+La coordonnée du bas du champ est `field.clientHeight`. La propriété CSS `top` fait référence au bord supérieur de la balle. Elle doit donc aller de `0` à `field.clientHeight - ball.clientHeight`, c'est-à-dire la position finale la plus basse du bord supérieur de la balle.
 
-To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+Pour obtenir l'effet de "rebond", nous pouvons utiliser la fonction de timing `bounce` en mode `easeOut`.
 
-Here's the final code for the animation:
+Voici le code final de l'animation :
 
 ```js
 let to = field.clientHeight - ball.clientHeight;

7-animation/3-js-animation/1-animate-ball/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# Animer la balle rebondissante
 
-Make a bouncing ball. Click to see how it should look:
+Créez une balle rebondissante. Cliquez pour voir à quoi elle doit ressembler :
 
 [iframe height=250 src="solution"]

7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -1,18 +1,18 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+Dans la tâche <info:task/animate-ball>, nous n'avions qu'une seule propriété à animer. Maintenant, nous avons besoin d'une supplémentaire : `elem.style.left`.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+La coordonnée horizontale change selon une autre loi : elle ne "rebondit" pas, mais augmente progressivement en déplaçant la balle vers la droite.
 
-We can write one more `animate` for it.
+Nous pouvons écrire un autre `animate` pour elle.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+Comme fonction de temporisation, nous pourrions utiliser `linear`, mais quelque chose comme `makeEaseOut(quad)` semble bien mieux.
 
-The code:
+Le code :
 
 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;
 
-// animate top (bouncing)
+// animer top (rebondissement)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
@@ -21,7 +21,7 @@ animate({
   }
 });
 
-// animate left (moving to the right)
+// animer left (déplacement vers la droite)
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),

7-animation/3-js-animation/2-animate-ball-hops/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# Animer la balle pour qu'elle rebondisse vers la droite.
 
-Make the ball bounce to the right. Like this:
+Faites rebondir la balle vers la droite. Comme ceci :
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+Écrivez le code d'animation. La distance à gauche est de `100px`.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+Prenez la solution de la tâche précédente <info:task/animate-ball> comme source.