Resolve conflicts.

Author: odsantos

1-js/02-first-steps/04-variables/article.md

@@ -24,11 +24,7 @@ Agora, podemos colocar alguns dados usando o operador de atribuição `=`:
 let message;
 
 *!*
-<<<<<<< HEAD
-message = 'Olá'; // armazenar a string
-=======
-message = 'Hello'; // store the string 'Hello' in the variable named message
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+message = 'Olá'; // armazene a string 'Olá' na variável chamada message
 */!*
 ```
 

7-animation/2-css-animations/article.md

@@ -86,11 +86,7 @@ Em `transition-duration` especificamos quanto tempo a animação deve durar. Ele
 
 Em `transition-delay` especificamos o atraso *antes* da animação começar. Por exemplo, se `transition-delay` é `1s` e `transition-duration` é `2s`, então a animação começa 1 segundo depois da mudança da propriedade e a duração total é de 2 segundos.
 
-<<<<<<< HEAD
-Valores negativos também são possíveis. Dessa forma, a animação começa imediatamente, mas o ponto inicial da animação é depois do valor dado (tempo). Por exemplo, se `transition-delay` é `-1s` e `transition-duration` é `2s`,  então a animação começa do estado que estaria na metade de seu ciclo e dura 1 segundo.
-=======
-Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second.
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+Valores negativos também são possíveis. Dessa forma, a animação começa imediatamente, mas o ponto inicial da animação é depois do valor dado (tempo). Por exemplo, se `transition-delay` for `-1s` e `transition-duration` forem `2s`,  então a animação começa do estado que estaria na metade de seu ciclo e dura 1 segundo.
 
 Essa é uma animação que desloca números de `0` a `9` usando a propriedade CSS `translate`:
 
@@ -172,11 +168,7 @@ A propriedade CSS `transition` é baseada na curva:
 .train {
   left: 0;
   transition: left 5s cubic-bezier(0, 0, 1, 1);
-<<<<<<< HEAD
-  /* JavaScript configura a propriedade left para 450px */
-=======
-  /* click on a train sets left to 450px, thus triggering the animation */
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+  /* clicando numa cadeia configura a propriedade left para 450px, desencadeando assim a animação */
 }
 ```
 
@@ -199,11 +191,7 @@ CSS:
 .train {
   left: 0;
   transition: left 5s cubic-bezier(0, .5, .5, 1);
-<<<<<<< HEAD
-  /* JavaScript configura a propriedade left para 450px */
-=======
-  /* click on a train sets left to 450px, thus triggering the animation */
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+  /* clicando numa cadeia configura a propriedade left para 450px, desencadeando assim a animação */
 }
 ```
 
@@ -242,11 +230,7 @@ No exemplo abaixo, o código da animação é:
 .train {
   left: 100px;
   transition: left 5s cubic-bezier(.5, -1, .5, 2);
-<<<<<<< HEAD
-  /* JavaScript configura a propriedade left para 400px */
-=======
-  /* click on a train sets left to 450px */
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+  /* clicando numa cadeia configura a propriedade left para 400px */
 }
 ```
 
@@ -274,11 +258,7 @@ Mas, como criar uma curva Bezier para uma tarefa específica? Existem várias fe
 
 ### Steps (Passos)
 
-<<<<<<< HEAD
-A *timing function* `steps(number of steps[, start/end])` nos permite separar a animação em passos.
-=======
-The timing function `steps(number of steps[, start/end])` allows splitting an transition into multiple steps.
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+A função de tempo `steps(number of steps[, start/end])` nos permite separar uma transição em múltiplos passos.
 
 Vamos examiná-la em um exemplo com dígitos.
 
@@ -319,17 +299,10 @@ O processo evolui assim:
 
 O valor alternativo `end` significaria que a mudança devesse ser aplicada não no início, mas ao final de cada segundo.
 
-<<<<<<< HEAD
-Então, o processo evoluiria assim:
+Então, o processo para `steps(9, end)` evoluiria assim:
 
-- `0s` -- `0`
-- `1s` -- `-10%` (primeira mudança ao final do primeiro segundo)
-=======
-So the process for `steps(9, end)` would go like this:
-
-- `0s` -- `0` (during the first second nothing changes)
-- `1s` -- `-10%` (first change at the end of the 1st second)
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+- `0s` -- `0` (durante o primeiro segundo nada acontece)
+- `1s` -- `-10%` (primeira mudança no final do primeiro segundo)
 - `2s` -- `-20%`
 - ...
 - `9s` -- `-90%`
@@ -434,46 +407,41 @@ Existem vários artigos sobre `@keyframes` e uma [especificação detalhada](htt
 
 Provavelmente, você não precisará de `@keyframes` regularmente, a não ser que tudo estiver em movimento constante em sua página.
 
-<<<<<<< HEAD
-## Resumo
-
-Animações CSS permitem animar de forma suave (ou não) mudanças em uma ou diversas propriedades CSS.
-=======
-## Performance
+## Desempenho (performance)
 
-Most CSS properties can be animated, because most of them are numeric values. For instance, `width`, `color`, `font-size` are all numbers. When you animate them, the browser gradually changes these numbers frame by frame, creating a smooth effect.
+A maioria das propriedades CSS podem ser animadas, porque a maioria delas são valores numéricos. Por exemplo, `width`, `color`, `font-size` são todas números. Quando você as anima, o navegador gradualmente muda estes números quadro por quadro, criando um efeito suave.
 
-However, not all animations will look as smooth as you'd like, because different CSS properties cost differently to change.
+Contudo, nem todas as animações parecerão tão suaves como você gostaria, porque diferentes propriedades CSS custam a mudar de forma diferente.
 
-In more technical details, when there's a style change, the browser goes through 3 steps to render the new look:
+Em detalhes mais técnicos, quando há uma mudança de estilo, o navegador passa por três passos para apresentar o novo aspeto:
 
-1. **Layout**: re-compute the geometry and position of each element, then
-2. **Paint**: re-compute how everything should look like at their places, including background, colors,
-3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist.
+1. **Layout (estrutura)**: re-computa a geometria e posição de cada elemento, depois
+2. **Paint (pintura)**: re-computa como tudo deveria parecer nos seus lugares, incluindo fundo, cores,
+3. **Composite (composição)**: apresenta os resultados finais no ecrã em pixels, e aplica transformações CSS se elas existirem.
 
-During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser  doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at <https://csstriggers.com>.
+Durante uma animação CSS, este processo se repete para cada quadro. Contudo, propriedades CSS que nunca afetem a geometria ou posição, tais como `color`, podem saltar o passo *Layout*. Se `color` se alterar, o navegador não calcula nenhuma nova geometria, ele vai para *Paint* -> *Composite*. E existem umas poucas propriedades que vão diretamente para *Composite*. Você pode encontrar uma longa lista de propriedades CSS e que estágios elas desencadeiam em <https://csstriggers.com>.
 
-The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations.
+As calculações podem levar tempo, especialmente em páginas com muitos elementos e uma estrutura complexa. E os atrasos são na verdade visíveis em muitos dispositivos, levando a animações menos fluidas e "saltitantes".
 
-Animations of properties that skip the Layout step are faster. It's even better if Paint is skipped too.
+Animações de propriedades que saltam o passo Layout são mais rápidas. E ainda melhor é se Paint também for saltado.
 
-The `transform` property is a great choice, because:
-- CSS transforms affect the target element box as a whole (rotate, flip, stretch, shift it).
-- CSS transforms never affect neighbour elements.
+A propriedade `transform` é uma grande escolha, porque:
+- Transformações CSS afetam a caixa do elemento alvo num todo (rodam, viram, esticam, deslocam ela).
+- Transformações CSS nunca afetam elementos vizinhos.
 
-...So browsers apply `transform` "on top" of existing Layout and Paint calculations, in the Composite stage.
+...Assim navegadores aplicam `transform` "por cima" de cálculos de Layout e Paint, no estágio Composite.
 
-In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies `transform` to element boxes that need it.
+Por outras palavras, o navegador calcula a Layout (tamanhos, posições), pinta-a com cores, fundo, etc no estágio Paint, e depois aplica `transform` a caixas de elementos que precisarem.
 
-Changes (animations) of the `transform` property never trigger Layout and Paint steps. More than that, the browser  leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very effecient.
+Mudanças (animações) da propriedade `transform` nunca desencadeiam os passos Layout e Paint. E ainda mais, o navegador explora o acelerador de gráficos (um *chip* especial na *CPU* ou placa gráfica) para transformações CSS, tornando-as muito eficientes.
 
-Luckily, the `transform` property is very powerful. By using `transform` on an element, you could rotate and flip it, stretch and shrink it, move it around, and [much more](https://developer.mozilla.org/docs/Web/CSS/transform#syntax). So instead of `left/margin-left` properties we can use `transform: translateX(…)`, use `transform: scale` for increasing element size, etc.
+Felizmente, a propriedade `transform` é muito poderosa. Ao usar `transform` em um elemento, você pode rodá-lo e virá-lo, esticá-lo e encolhê-lo, deslocá-lo, e [muito mais](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform), Assim, em vez das propriedades `left/margin-left` nós podemos usar `transform: translateX(…)`, usar `transform: scale` para aumentar o tamanho de um elemento, etc.
 
-The `opacity` property also never triggers Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects.
+A propriedade `opacity` também nunca desencadeia Layout (e também salta Paint no Mozilla Gecko). Você a pode usar para efeitos mostrar/esconder ou *fade-in/fade-out*.
 
-Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.
+Formando um par com `transform` e `opacity` geralmente pode resolver muitas das nossas necessidades, provendo animações fluidas e com bom aspeto.
 
-For example, here clicking on the `#boat` element adds the class with `transform: translateX(300)` and `opacity: 0`, thus making it move `300px` to the right and disappear:
+Por exemplo, clicando aqui no elemento `#boat` é adicionada a classe com `transform: translateX(300)` e `opacity: 0`, fazendo-o mover `300px` para a direita e desaparecer:
 
 ```html run height=260 autorun no-beautify
 <img src="https://js.cx/clipart/boat.png" id="boat">
@@ -494,10 +462,10 @@ For example, here clicking on the `#boat` element adds the class with `transform
 </script>
 ```
 
-Here's a more complex example, with `@keyframes`:
+Aqui está um exemplo mais complexo com `@keyframes`:
 
 ```html run height=80 autorun no-beautify
-<h2 onclick="this.classList.toggle('animated')">click me to start / stop</h2>
+<h2 onclick="this.classList.toggle('animated')">clique em mim para começar / parar</h2>
 <style>
   .animated {
     animation: hello-goodbye 1.8s infinite;
@@ -519,11 +487,9 @@ Here's a more complex example, with `@keyframes`:
   }
 </style>
 ```
+## Resumo
 
-## Summary
-
-CSS animations allow smoothly (or step-by-step) animated changes of one or multiple CSS properties.
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+Animações CSS permitem animar de forma suave (ou passo-a-passo) mudanças em uma ou diversas propriedades CSS.
 
 Elas são úteis para a maioria das tarefas envolvendo animações. Também podemos usar *Javascript* para animações, o próximo capítulo é dedicado a isso.
 
@@ -536,12 +502,8 @@ Limitações de animações CSS comparadas a animações usando *JavaScript*:
 - Não são apenas as propriedades que mudam. Podemos criar novos elementos em *JavaScript* como parte da animação.
 ```
 
-<<<<<<< HEAD
-A maioria das animações pode ser implementada usando CSS como descrito nesse capítulo. E o evento `transitionend` nos permite rodar *Javascript* após a animação, integrando-se bem com o código.
-=======
-In early examples in this chapter, we animate `font-size`, `left`, `width`, `height`, etc. In real life projects, we should use `transform: scale()` and `transform: translate()` for better performance.
+Em exemplos anteriores deste capítulo, nós animamos `font-size`, `left`, `width`, `height`, etc. Em projetos na vida real, nós deveríamos usar `transform: scale()` e `transform: translate()` para melhor desempenho.
 
-The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code.
->>>>>>> bc08fd1b32285304b14afea12a9deaa10d13452b
+A maioria das animações pode ser implementada usando CSS como descrito nesse capítulo. E o evento `transitionend` nos permite rodar *Javascript* após a animação, integrando-se bem com o código.
 
 Mas, no próximo capítulo, iremos criar animações em *Javascript* para cobrir casos mais complexos.