Exercício: selo pulsante que respeita quem pede menos movimento
Um selo 'Novo' que pulsa continuamente, com uma @keyframes de verdade, e uma media query que reduz a animação para quem pediu menos movimento.
Estudar esta lição interativa →Complete o CSS do editor: declare uma @keyframes pulsar com pelo menos dois passos (indo de scale(1) a scale(1.08) e voltando); aplique-a ao .selo usando animation-name, animation-duration e animation-iteration-count: infinite; e adicione uma @media (prefers-reduced-motion: reduce) reduzindo a animation-duration.
Declare @keyframes pulsar animando transform (de scale(1) a scale(1.08) e voltando); aplique animation-name, animation-duration e animation-iteration-count: infinite ao .selo; e adicione, DEPOIS da regra do .selo, uma @media (prefers-reduced-motion: reduce) que pare a repetição (animation-iteration-count: 1, ou animation: none): duração curtíssima com repetição infinita pisca como um estroboscópio.
/* sua vez: declare @keyframes pulsar, indo de scale(1) até scale(1.08) e voltando a scale(1) */
.selo{
display:inline-block;
background:#ea580c;
color:#fff;
padding: 6px 14px;
border-radius: 999px;
/* sua vez: anime com animation-name, animation-duration (ex: 1.6s) e animation-iteration-count: infinite */
}
/* sua vez: adicione, depois da regra do .selo, uma @media (prefers-reduced-motion: reduce) que reduza a animation-duration do .selo (ex: 0.01ms) E pare a repetição (animation-iteration-count: 1) */
🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.