Merge pull request #285 from longo-andrea/article/css-animations

CSS-animations

Author: longo-andrea

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

@@ -1,17 +1,17 @@
 
-CSS to animate both `width` and `height`:
+Qui vedete il CSS per animare sia `width` che `height`:
 ```css
-/* original class */
+/* classe originale */
 
 #flyjet {
   transition: all 3s;
 }
 
-/* JS adds .growing */
+/* JS aggiunge il ridimensionamento */
 #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.
+Notate che `transitionend` si innesca due volte, una per ogni proprietà. Quindi senza definire un controllo adeguato, il messaggio verrà mostrato due volte.

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

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Animate a plane (CSS)
+# Animate un aereo (CSS)
 
-Show the animation like on the picture below (click the plane):
+Definite un animazione che si comporti come quella mostrata nella figura sotto (cliccate l'areo):
 
 [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.
+- L'immagine si ridimensiona al click da `40x24px` a `400x240px` (10 volte più grande).
+- L'animazione ha una durata di 3 secondi.
+- Al terminte dovrete mostrare: "Done!".
+- Durante l'animazione, potrebbero esserci più click sull'aereo. Questi non dovrebbero comprometterne il funzionamento.

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".
+Dovete scegliere la giusta curva di Bezier per questa animazione. Deve avere un valore `y>1` in qualche punto per far sì che l'aereo "ecceda" le sue dimensioni originali.
 
-For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+Ad esempio, potete impostare entrambi i punti di controllo con `y>1`, come: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 
-The graph:
+La curva:
 
 ![](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)
+# Animate il volo dell'aereo (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.
+Modificate la soluzione dell'esercizio precedente <info:task/animate-logo-css> per far sì che l'aereo ecceda le dimensioni originali di 400x240px e successivamente ritorni al suo aspetto originale.
 
-Here's how it should look (click on the plane):
+Cosi è come dovrebbe apparire (cliccate sull'aereo):
 
 [iframe src="solution" height=350]
 
-Take the solution of the previous task as the source.
+Prendete la soluzione dell'esercizio precedente come punto di partenza.

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

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Animated circle
+# Animate il cerchio
 
-Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
+Create una funzione `showCircle(cx, cy, radius)` che mostri un cerchio che cresce.
 
-- `cx,cy` are window-relative coordinates of the center of the circle,
-- `radius` is the radius of the circle.
+- `cx,cy` sono le coordinate del centro del cerchio rispetto alla finestra del browser,
+- `radius` è il raggio del cerchio.
 
-Click the button below to see how it should look like:
+Cliccate il bottone sotto per vedere come dovrebbe apparire:
 
 [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.
+Potente prendere lo stile del cerchio dal codice sorgente, concentrandovi unicamente sull'animazione.

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

@@ -1,13 +1,13 @@
 
-# Animated circle with callback
+# Animate il cerchio con callback
 
 Nel task <info:task/animate-circle> è mostrato un cerchio crescente animato.
 
-Ora diciamo che non vogliamo solo un cerchio, ma anche mostrare un messaggio al suo interno. Il messaggio dovrebbe apparire *dopo* che l'animazione è completa (il cerchio è cresciuto del tutto), altrimenti sarebbe brutto.
+Ora ipotizziamo di non volere solamente un cerchio, ma anche di volere mostrare un messaggio al suo interno. Il messaggio dovrebbe apparire *dopo* che l'animazione è stata completata (il cerchio è cresciuto del tutto), altrimenti sarebbe brutto.
 
-Nella soluzione del task, la funzione `showCircle(cx, cy, radius)` disegna il cerchio, ma non da modo di tracciare quando è pronto.
+Nella soluzione del task, la funzione `showCircle(cx, cy, radius)` disegna il cerchio, ma non dà modo di monitorare il completamento dell'animazione.
 
-Aggiungi un argomento callback: `showCircle(cx, cy, radius, callback)` da chiamare quando l'animazione è completa. La `callback` dovrebbe il `<div>` cerchio come argomento.
+Aggiungi un argomento callback: `showCircle(cx, cy, radius, callback)` da chiamare quando l'animazione è completa. La `callback` dovrebbe ricevere il `<div>` che corrisponde al cerchio come argomento.
 
 Ecco l'esempio: