Questão FC373521
Em uma página web há um contêiner chamado trem, que possui a seguinte configuração CSS. div.trem { width: 200px; height: 200px; background-color: red; animation-name: metro; animat
Desenvolvimento Web
FCC · 2019
Em uma página web há um contêiner chamado trem, que possui a seguinte configuração CSS.
div.trem {
width: 200px;
height: 200px;
background-color: red;
animation-name: metro;
animation-duration: 4s;
}
..I.. metro {
from {background-color: red;}
to {background-color: blue;}
}
Para que a animação chamada metro mude a cor de fundo do contêiner de vermelho para azul, a lacuna I deve ser corretamente preenchida por
- @media animation
- @function
- @keyframes
- @transient
- @animation
Mostrar resposta e comentário
Gabarito
Certo
Comentário do professor
@keyframes é a regra CSS que define a sequência de estados (keyframes) de uma animação. Ela indica quais estilos o elemento terá em pontos específicos da animação, usando tanto porcentagens (0%–100%) quanto os atalhos from e to.
No exemplo dado, a declaração animation-name: metro; no seletor do contêiner aponta para a regra @keyframes chamada metro. Assim, o navegador aplica os estilos declarados dentro de @keyframes metro { ... } durante os 4s definidos por animation-duration.
Um trecho válido seria:
@keyframes metro { from {background-color: red;} to {background-color: blue;} }
Isso faz a transição suave do fundo vermelho para o azul ao longo da duração da animação.
Portanto, para que a animação funcione e altere a cor conforme esperado, a lacuna deve ser preenchida por @keyframes.
Conteúdo do catálogo FC Concursos · Atualizado em