CSS-animations

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

@@ -1,17 +1,17 @@
 
-CSS to animate both `width` and `height`:
+CSS pentru a anima atât `width` cât și `height`:
 ```css
-/* original class */
+/* clasa originală */
 
 #flyjet {
   transition: all 3s;
 }
 
-/* JS adds .growing */
+/* JS adaugă .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.
+Vă rugăm să notați că `transitionend` se declanșează de două ori -- o dată pentru fiecare proprietate. Deci dacă nu efectuăm o verificare suplimentară atunci mesajul va apărea de 2 ori.

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('Gata!');
         }
       });
 

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

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Animate a plane (CSS)
+# Animați un avion (CSS)
 
-Show the animation like on the picture below (click the plane):
+Afișați animația ca în imaginea de mai jos (faceți clic pe avion):
 
 [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.
+- Imaginea crește când faceți clic de la `40x24px` la `400x240px` (de 10 ori mai mare).
+- Animația durează 3 secunde.
+- La final arătați output: "Gata!".
+- În timpul procesului de animație, pot exista mai multe click-uri pe avion. Acestea nu ar trebui să "strice" nimic.

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".
+Trebuie să alegem curba Bezier potrivită pentru acea animație. Aceasta ar trebui să aibă `y>1` undeva pentru ca avionul să "sară".
 
-For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+De exemplu, putem lua ambele puncte de control cu `y>1`, ca: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 
-The graph:
+Graficul:
 
 ![](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)
+# Animați avionul care zboară (CSS)
 
-Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than its original size 400x240px (jump out), and then return to that size.
+Modificați soluția din sarcina anterioară <info:task/animate-logo-css> pentru a face avionul să crească mai mult decât dimensiunea sa originală de 400x240px (să sară în afară), apoi să revină la această dimensiune.
 
-Here's how it should look (click on the plane):
+Iată cum ar trebui să arate (faceți clic pe avion):
 
 [iframe src="solution" height=350]
 
-Take the solution of the previous task as the source.
+Luați ca sursă soluția din sarcina anterioară.

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

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Animated circle
+# Cerc animat
 
-Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
+Creați o funcție `showCircle(cx, cy, radius)` care arată un cerc animat în creștere.
 
-- `cx,cy` are window-relative coordinates of the center of the circle,
-- `radius` is the radius of the circle.
+- `cx,cy` sunt coordonatele relative la fereastră ale centrului cercului,
+- `radius` este raza cercului.
 
-Click the button below to see how it should look like:
+Faceți clic pe butonul de mai jos pentru a vedea cum ar trebui să arate:
 
 [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.
+Documentul sursă are un exemplu de cerc cu stiluri corecte, deci sarcina este tocmai de a face animația corect.

7-animation/2-css-animations/4-animate-circle-callback/solution.view/index.html

@@ -22,14 +22,14 @@
 
 <body>
 
-  <button onclick="go()">Click me</button>
+  <button onclick="go()">Apasă-mă</button>
 
   <script>
 
   function go() {
     showCircle(150, 150, 100, div => {
       div.classList.add('message-ball');
-      div.append("Hello, world!");
+      div.append("Salut, lume!");
     });
   }
 

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

@@ -1,25 +1,25 @@
 
-# Animated circle with callback
+# Cerc animat cu callback
 
-In the task <info:task/animate-circle> an animated growing circle is shown.
+În sarcina <info:task/animate-circle> este afișat un cerc animat în creștere.
 
-Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly.
+Acum să spunem că avem nevoie nu doar de un cerc, ci și de un mesaj în interiorul acestuia. Mesajul ar trebui să apară *după* finalizarea animației (cercul a crescut complet), altfel ar arăta urât.
 
-In the solution of the task, the function `showCircle(cx, cy, radius)` draws the circle, but gives no way to track when it's ready.
+În soluția sarcinii, funcția `showCircle(cx, cy, radius)` desenează cercul, dar nu oferă nicio modalitate de a urmări când este gata.
 
-Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle `<div>` as an argument.
+Adăugați un argument de callback: `showCircle(cx, cy, radius, callback)` care va fi apelată atunci când animația este finalizată. `callback`-ul trebuie să primească `<div>`-ul cercului ca argument.
 
-Here's the example:
+Iată exemplul:
 
 ```js
 showCircle(150, 150, 100, div => {
   div.classList.add('message-ball');
-  div.append("Hello, world!");
+  div.append("Salut, lume!");
 });
 ```
 
 Demo:
 
 [iframe src="solution" height=260]
 
-Take the solution of the task <info:task/animate-circle> as the base.
+Luați ca bază soluția sarcinii <info:task/animate-circle>.