diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.portuguese.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.portuguese.md index 46e53c6f22..b723db96e9 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.portuguese.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.portuguese.md @@ -7,7 +7,7 @@ localeTitle: Criar movimento usando animação CSS --- ## Description -
Quando os elementos têm uma position especificada, como fixed ou relative , as propriedades de deslocamento de CSS right , left , top e bottom podem ser usadas em regras de animação para criar movimento. Conforme mostrado no exemplo abaixo, você pode empurrar o item para baixo e depois para cima definindo a propriedade top do quadro-chave de 50% para 50px, mas definindo-o como 0px para o primeiro ( 0% ) e o último ( 100% ) quadro-chave.
@keyframes rainbow {
0% {
cor de fundo: azul;
top: 0px;
}
50% {
cor de fundo: verde;
top: 50px;
}
100% {
cor de fundo: amarelo;
top: 0px;
}
}
+
Quando os elementos têm uma position especificada, como fixed ou relative , as propriedades de deslocamento de CSS right , left , top e bottom podem ser usadas em regras de animação para criar movimento. Conforme mostrado no exemplo abaixo, você pode empurrar o item para baixo e depois para cima definindo a propriedade top do quadro-chave de 50% para 50px, mas definindo-o como 0px para o primeiro ( 0% ) e o último ( 100% ) quadro-chave.
@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}
## Instructions
Adicione um movimento horizontal à animação div . Usando a propriedade offset left , adicione à regra @keyframes para que o arco-íris comece em 0 pixels a 0% , @keyframes para 25 pixels em 50% e termine em -25 pixels em 100% . Não substitua a propriedade top no editor - a animação deve ter movimento vertical e horizontal.