Gestor de Apoio as Atividades Policiais Civis - Especialidade: Analista de Informática: Desenvolvimento de Sistemas
Em relação ao código HTML e CSS precedente, julgue o próximo item.Ao ser executado, o código exibe o texto HELLO! em uma caixa rosa de 150 px, na posição definida e com um efeito de animação do tipo transição suave.
CCerto
EErrado
Revelar gabarito e comentário▾
GabaritoE — Errado
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
CSS: animações e transições
Gabarito: letra E (ERRADO). A afirmação está incorreta porque o código CSS apresentado na imagem não produz uma transição suave — ele define uma animação, que é um mecanismo diferente de transição. A transição (transition) é aplicada quando uma propriedade muda de valor, enquanto a animação (@keyframes) é executada de forma contínua e independente, mesmo sem mudança de estado. A banca troca os conceitos de transition e animation para confundir o candidato.
O CSS oferece duas formas principais de criar efeitos de movimento: transições e animações. A transição é um efeito que ocorre quando uma propriedade CSS muda de valor, por exemplo, quando o usuário passa o mouse sobre um elemento e a cor de fundo muda gradualmente. A animação, por outro lado, é definida com a regra @keyframes, que especifica uma sequência de estilos que o elemento deve percorrer, e é executada automaticamente, sem depender de uma mudança de estado. A diferença fundamental é que a transição é reativa (depende de um gatilho, como :hover), enquanto a animação é proativa (executa sozinha, com duração e repetição definidas).
No código da questão, a presença de @keyframes indica que se trata de uma animação, não de uma transição. A animação é aplicada com a propriedade animation, que controla a duração, o atraso, a repetição e a direção do efeito. Já a transição é aplicada com a propriedade transition, que define a duração e a curva de aceleração da mudança de uma propriedade. A banca explora exatamente essa confusão: o candidato que não domina a diferença entre transition e animation pode marcar a alternativa como correta, achando que ambos são a mesma coisa.
Na prática, se o código tivesse usado transition, o efeito seria uma transição suave, mas como usa @keyframes e animation, o efeito é uma animação. A pegadinha está em chamar de "transição suave" o que na verdade é uma "animação". Para resolver a questão, basta identificar a presença de @keyframes no código, que é a marca registrada das animações, e lembrar que transições são aplicadas com a propriedade transition, sem @keyframes.
NÃO CAIA NESSA!
A banca troca os conceitos de transition e animation. O candidato que não sabe a diferença pode marcar como correto, achando que ambos são a mesma coisa. Lembre-se: transition é reativa (depende de um gatilho), animation é proativa (executa sozinha).
Movimento no CSS
1Transição (transition)
Reativa (depende de gatilho)
Ex.: :hover muda cor gradualmente
2Animação (animation)
Proativa (executa sozinha)
Usa @keyframes
Controla duração, repetição, direção
LEVEL · soulevel.com.br
Alternativa C — ❌ Incorreta
A afirmação está incorreta porque o código usa @keyframes, que define uma animação, não uma transição. A transição é aplicada com a propriedade transition, que é reativa e depende de uma mudança de estado, como :hover. A animação, por outro lado, é executada automaticamente, com duração e repetição definidas. Portanto, o efeito descrito como "transição suave" é, na verdade, uma animação.
Alternativa E — ✅ Correta ⟵ GABARITO
A alternativa E é a correta, pois a afirmação é falsa. O código exibe o texto HELLO! em uma caixa rosa de 150 px, na posição definida, mas o efeito é uma animação, não uma transição suave. A presença de @keyframes e da propriedade animation confirma que se trata de uma animação, que é um mecanismo diferente da transição. Portanto, o item está errado.
Em relação ao código HTML e CSS precedente, julgue o próximo item.Ao ser executado, o código exibe o texto HELLO! em uma caixa rosa de 150 px, na posição definida e com um efeito de animação do tipo transição suave.