Quiz 15 - Introdução

1. Para que serve a propriedade `transition` no CSS?

Para mudar a cor do texto instantaneamente

Para suavizar a mudança de uma propriedade CSS ao longo do tempo

Para traduzir o site para outros idiomas

Para criar um link para outra página *Explicação: A transição permite que efeitos como mudança de cor ou tamanho ocorram gradualmente, melhorando a experiência do usuário.*

2. No código `transition: background-color 0.5s;`, o que significa `0.5s`?

A cor do botão

O tamanho do botão

A duração da transição (meio segundo)

O número de vezes que a animação repete *Explicação: O valor em segundos (s) ou milissegundos (ms) define quanto tempo a animação levará para completar.*

3. Qual propriedade permite girar, inclinar ou aumentar um elemento sem afetar os outros itens ao redor?

`move`

`change`

`transform`

`shift` *Explicação: O `transform` altera a geometria visual do elemento de forma independente do fluxo do layout.*

4. Como você faria para aumentar um elemento em 50% do seu tamanho original usando `transform`?

`transform: big(1.5);`

`transform: scale(1.5);`

`transform: rotate(50deg);`

`transform: size(50%);` *Explicação: A função `scale` (escala) multiplica o tamanho do elemento pelo valor informado.*

5. O que são os `@keyframes` no CSS?

São senhas para proteger o código

São definições dos estágios (quadros) de uma animação complexa

São extensões para carregar imagens mais rápido

São seletores de menu *Explicação: Com keyframes, definimos o que acontece em 0%, 50%, 100% (ou qualquer outro ponto) da animação.*

6. Qual propriedade é usada para aplicar uma animação criada com `@keyframes` a um elemento?

`transition-name`

`move-animation`

`animation`

`keyframe-start` *Explicação: A propriedade `animation` conecta o nome do keyframe criado ao elemento específico.*

7. Para que serve o valor `infinite` na propriedade `animation`?

Para que a animação dure 100 anos

Para que a animação se repita continuamente sem parar

Para que a animação seja muito rápida

Para que a animação ocorra apenas uma vez *Explicação: O `animation-iteration-count: infinite` cria loops eternos.*

8. O que faz o valor `ease-in-out` em uma transição ou animação?

Faz a animação parar no meio

Remove todas as cores

Controla o ritmo, fazendo a animação começar lenta, acelerar e terminar lenta

Inverte o sentido da animação *Explicação: É uma função de tempo que torna o movimento mais natural e orgânico.*

9. Se você quiser que uma imagem gire 360 graus, qual valor usaria no `transform` dentro do keyframe de 100%?

`rotate(100%)`

`rotate(360deg)`

`turn(full)`

`circle(360)` *Explicação: Usamos `deg` (degrees/graus) para definir a rotação no CSS.*

10. É uma boa prática de design encher o site de animações piscantes e rápidas por todo lado?

Sim, isso atrai a atenção de todos

Não, pode causar distração e até problemas de saúde (como convulsões ou tontura) em alguns usuários

Sim, pois deixa o site mais pesado e profissional

Apenas se o site for de uma startup *Explicação: O uso Ético de animações preza pela funcionalidade e conforto visual do usuário.*