Artigo original: Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples
Nos primeiros dias da web, os elementos HTML, como a tag blink, eram maneiras nativas de adicionar alguns efeitos de animação para animar uma página da web. Como podemos usar essas animações hoje para adicionar brilho aos nossos sites e aplicações?
- O que é a tag blink do HTML?
- Como se usa a tag blink?
- Você ainda pode usar a tag blink?
- Recriando a tag blink com animações em CSS
O que é a tag blink do HTML?
A tag blink (<blink>) é uma tag HTML obsoleta, que faz o conteúdo da tag piscar lentamente.
Ela, juntamente com outras tags obsoletas, como a tag marquee (<marquee>), eram uma maneira fácil de adicionar efeitos de animação simples no seu site.
Como se usa a tag blink?
Como a tag blink era um elemento HTML simples, você a usaria diretamente com o seu conteúdo.
Por exemplo, se você quisesse que a palavra "blink" em blink-182 piscasse, você escreveria o seguinte código HTML:
<p>
<blink>blink</blink>-182
</p>Você ainda pode usar a tag blink?
Como você deve ter notado no gif acima, essa tag está obsoleta.
Isso significa que você não pode usar a tag blink do HTML por si só. No entanto, isso não deve nos impedir de refazer seus efeitos em toda sua glória piscante.
Observação: a tag blink foi depreciada devido a preocupações com acessibilidade. Faça sua pesquisa (em inglês) antes de tentar usar uma solução que traga o mesmo efeito, pois todos devemos nos esforçar para fazer nossos projetos o mais inclusivos possível.
Recriando a tag blink com animações em CSS
Hoje, no mundo do desenvolvimento para a web, animações geralmente são tratadas com CSS ou JavaScript. Usando animações em CSS, conseguimos recriar a tag blink com apenas algumas linhas e a temos funcionando de novo.
Com o seguinte CSS:
.blink {
animation: blink 1s steps(1, end) infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Você pode adicionar a classe .blink a qualquer elemento HTML para fazê-lo piscar.
<p>
<span class="blink">blink</span>-182
</p>
Modernizando a tag blink
Se quiséssemos algo um pouco mais suave, o que poderíamos fazer?
Bom, para começar, podemos fazer a animação desaparecer gradualmente removendo os steps (passos, em português) da definição da animação.
.blink {
animation: blink 1s infinite;
}
Se quiséssemos fazê-la desaparecer gradualmente como um efeito de ficção científica, seria possível?
.blink {
animation: blink 3s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0;
color: blue;
}
}
Também podemos usar um efeito de crescimento e desaparecimento bem legal.
.blink {
animation: blink 3s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale(2);
}
51% {
opacity: 0;
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 1;
}
}
Controlando as animações com CSS
Embora você não possa mais usar a tag blink, você ainda tem várias opções. O CSS fornece diversas opções de animação nativamente. Então, se você deseja recriar seu passatempo favorito em HTML ou recriar a sequência do título de "Alien, o oitavo passageiro", pratique. As possibilidades são virtualmente infinitas.
