Fixes CSS auto-translation (#28983)

curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.portuguese.md

@@ -7,7 +7,7 @@ localeTitle: Saiba como funcionam as propriedades CSS @keyframes e animação
 ---
 
 ## Description
-<section id="description"> Para animar um elemento, você precisa saber sobre as propriedades da animação e a regra <code>@keyframes</code> . As propriedades de animação controlam como a animação deve se comportar e a regra <code>@keyframes</code> controla o que acontece durante a animação. Existem oito propriedades de animação no total. Este desafio irá mantê-lo simples e cobrir os dois mais importantes em primeiro lugar: <code>animation-name</code> define o nome da animação, que é posteriormente usado por <code>@keyframes</code> para dizer ao CSS quais regras vão com quais animações. <code>animation-duration</code> define o período de tempo para a animação. <code>@keyframes</code> é como especificar exatamente o que acontece dentro da animação ao longo da duração. Isso é feito fornecendo propriedades CSS para &quot;quadros&quot; específicos durante a animação, com porcentagens variando de 0% a 100%. Se você comparar isso com um filme, as propriedades CSS para 0% são como o elemento é exibido na cena de abertura. As propriedades CSS para 100% são como o elemento aparece no final, logo antes da rolagem dos créditos. Em seguida, o CSS aplica a mágica para fazer a transição do elemento durante a duração determinada para representar a cena. Aqui está um exemplo para ilustrar o uso de <code>@keyframes</code> e as propriedades da animação: <blockquote> #anim { <br> nome da animação: colorido; <br> animação-duração: 3s; <br> } <br> @keyframes colorido { <br> 0% { <br> cor de fundo: azul; <br> } <br> 100% { <br> cor de fundo: amarelo; <br> } <br> } </blockquote> Para o elemento com o <code>anim</code> id, o trecho de código acima define o <code>animation-name</code> da <code>animation-name</code> para <code>colorful</code> e define a <code>animation-duration</code> da <code>animation-duration</code> como 3 segundos. Em seguida, a regra <code>@keyframes</code> vinculada às propriedades de animação com o nome <code>colorful</code> . Ele define a cor para azul no início da animação (0%), que passará para amarelo no final da animação (100%). Você não está limitado a apenas transições de início e fim, você pode definir propriedades para o elemento para qualquer porcentagem entre 0% e 100%. </section>
+<section id="description"> Para animar um elemento, você precisa saber sobre as propriedades da animação e a regra <code>@keyframes</code> . As propriedades de animação controlam como a animação deve se comportar e a regra <code>@keyframes</code> controla o que acontece durante a animação. Existem oito propriedades de animação no total. Este desafio irá mantê-lo simples e cobrir os dois mais importantes em primeiro lugar: <code>animation-name</code> define o nome da animação, que é posteriormente usado por <code>@keyframes</code> para dizer ao CSS quais regras vão com quais animações. <code>animation-duration</code> define o período de tempo para a animação. <code>@keyframes</code> é como especificar exatamente o que acontece dentro da animação ao longo da duração. Isso é feito fornecendo propriedades CSS para &quot;quadros&quot; específicos durante a animação, com porcentagens variando de 0% a 100%. Se você comparar isso com um filme, as propriedades CSS para 0% são como o elemento é exibido na cena de abertura. As propriedades CSS para 100% são como o elemento aparece no final, logo antes da rolagem dos créditos. Em seguida, o CSS aplica a mágica para fazer a transição do elemento durante a duração determinada para representar a cena. Aqui está um exemplo para ilustrar o uso de <code>@keyframes</code> e as propriedades da animação: <blockquote>#anim {<br>&nbsp;&nbsp;animation-name: colorful;<br>&nbsp;&nbsp;animation-duration: 3s;<br>}<br>@keyframes colorful {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;}<br>}</blockquote> Para o elemento com o <code>anim</code> id, o trecho de código acima define o <code>animation-name</code> da <code>animation-name</code> para <code>colorful</code> e define a <code>animation-duration</code> da <code>animation-duration</code> como 3 segundos. Em seguida, a regra <code>@keyframes</code> vinculada às propriedades de animação com o nome <code>colorful</code> . Ele define a cor para azul no início da animação (0%), que passará para amarelo no final da animação (100%). Você não está limitado a apenas transições de início e fim, você pode definir propriedades para o elemento para qualquer porcentagem entre 0% e 100%. </section>
 
 ## Instructions
 <section id="instructions"> Crie uma animação para o elemento com o id <code>rect</code> , definindo o <code>animation-name</code> da <code>animation-name</code> como rainbow e a <code>animation-duration</code> da <code>animation-duration</code> como 4 segundos. Em seguida, declare uma regra <code>@keyframes</code> e defina a <code>background-color</code> no início da animação ( <code>0%</code> ) como azul, o meio da animação ( <code>50%</code> ) como verde e o final da animação ( <code>100%</code> ) como amarelo. </section>