---
id: 587d78a7367417b2b2512adf
title: Learn How the CSS @keyframes and animation Properties Work
challengeType: 0
videoUrl: ''
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%.
## 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.
## Tests
```yml
tests:
- text: O elemento com o id de rect
deve ter uma propriedade de animation-name
com um valor de arco-íris.
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of rect
should have an animation-name
property with a value of rainbow.");'
- text: O elemento com id de rect
deve ter uma propriedade de animation-duration
com um valor de 4s.
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of rect
should have an animation-duration
property with a value of 4s.");'
- text: A regra @keyframes
deve usar o animation-name
da animation-name
do arco animation-name
íris.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The @keyframes
rule should use the animation-name
of rainbow.");'
- text: A regra @keyframes
para arco-íris deve usar uma background-color
de fundo azul em 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of blue at 0%.");'
- text: A regra @keyframes
para arco-íris deve usar uma background-color
de fundo verde em 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of green at 50%.");'
- text: A regra @keyframes
para arco-íris deve usar uma background-color
de background-color
de amarelo em 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.");'
```
## Challenge Seed
## Solution
```js
// solution required
```