diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.portuguese.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.portuguese.md
index 4c1dfb708e..8be2f36de6 100644
--- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.portuguese.md
+++ b/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
- Para animar um elemento, você precisa saber sobre as propriedades da animação e a regra @keyframes . As propriedades de animação controlam como a animação deve se comportar e a regra @keyframes 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: animation-name define o nome da animação, que é posteriormente usado por @keyframes para dizer ao CSS quais regras vão com quais animações. animation-duration define o período de tempo para a animação. @keyframes é como especificar exatamente o que acontece dentro da animação ao longo da duração. Isso é feito fornecendo propriedades CSS para "quadros" 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 @keyframes e as propriedades da animação: #anim {
nome da animação: colorido;
animação-duração: 3s;
}
@keyframes colorido {
0% {
cor de fundo: azul;
}
100% {
cor de fundo: amarelo;
}
}
Para o elemento com o anim id, o trecho de código acima define o animation-name da animation-name para colorful e define a animation-duration da animation-duration como 3 segundos. Em seguida, a regra @keyframes vinculada às propriedades de animação com o nome colorful . 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%.
+ Para animar um elemento, você precisa saber sobre as propriedades da animação e a regra @keyframes . As propriedades de animação controlam como a animação deve se comportar e a regra @keyframes 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: animation-name define o nome da animação, que é posteriormente usado por @keyframes para dizer ao CSS quais regras vão com quais animações. animation-duration define o período de tempo para a animação. @keyframes é como especificar exatamente o que acontece dentro da animação ao longo da duração. Isso é feito fornecendo propriedades CSS para "quadros" 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 @keyframes e as propriedades da animação: #anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
Para o elemento com o anim id, o trecho de código acima define o animation-name da animation-name para colorful e define a animation-duration da animation-duration como 3 segundos. Em seguida, a regra @keyframes vinculada às propriedades de animação com o nome colorful . 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%.
## Instructions
Crie uma animação para o elemento com o id rect , definindo o animation-name da animation-name como rainbow e a animation-duration da animation-duration como 4 segundos. Em seguida, declare uma regra @keyframes e defina a background-color no início da animação ( 0% ) como azul, o meio da animação ( 50% ) como verde e o final da animação ( 100% ) como amarelo.