No dia 24 de fevereiro de 2016, o Facebook liberou seus novos botões de curtir, chamado de “Facebook Reactions”, a função foi liberada para todos os usuários, já que estava em fase de testes em alguns países.

São eles: Curtir, Amei, Haha, Uau, Triste, Grr.

Essa novidade é uma ótima maneira de saber como seus contatos reagem ao que você compartilha na rede social.
Em 2014 o Facebook registrou a patente que previa esses botões com sentimentos, leia mais detalhes.

Como sou apaixonado por CSS, resolvi criar essas micro interações ao passar o mouse sobre o elemento, e também caso use o teclado.

Cheguei a olhar como o Facebook criou aquelas animações, e resolvi fazer algo mais simples usando a propriedade translate e não animation conforme eles usaram no deles.

Veja o HTML

1. <div class="box">
2. <input type="checkbox" id="like" class="field-reactions">
3. <span class="text-desc">Press space and after tab key to navigation</span>
4. <label for="like" class="label-reactions">Like</label>
5. <div class="toolbox"></div>
6. <label class="overlay" for="like"></label>
7. <button class="reaction-like"><span class="legend-reaction">Like</span></button>
8. <button class="reaction-love"><span class="legend-reaction">Love</span></button>
9. <button class="reaction-haha"><span class="legend-reaction">Haha</span></button>
10. <button class="reaction-wow"><span class="legend-reaction">Wow</span></button>
11. <button class="reaction-sad"><span class="legend-reaction">Sad</span></button>
12. <button class="reaction-angry"><span class="legend-reaction">Angry</span></button>
13. </div>

o HTML

Linha 1: área geral do elemento que recebe o hover  e com isso inicia as interações utilizando o mouse.

Linha 2: input checkbox utilizado pra iniciar as interações ao ser checado via mouse ou teclado.

Linha 3: mensagem exibida pro usuário assim que ele navegar com o teclado e o input da linha 2 receber o foco.

Linha 4: elemento que recebe o background do like e também ao ser clicado faz o change do input checkbox e iniciando as interações.

Linha 5: caixa branca com borda arredondada que tem uma animação diferente dos reactions, por isso ele não é pai dos elementos.

Linha 6: overlay sem cor alguma que serve pra fechar as interações, caso o usuário clique na área fora do box.

Linha 7 a 12: reactions do Facebook que possui uma animação ao receber o :hover ou :focus.  Adicionei em cada um a propriedade transition-delay com diferença de 0.03s entre eles

O CSS

Para exibir os Reactions através do mouse, utilizei o :hover do CSS na classe .box , que é o pai geral dos elementos.

Para exibir via teclado, ou click do mouse, existe um input[type=”checked”], que manipula seus irmãos (os Reactions e o background branco com borda arredondada).

O elemento branco com borda arredondada, mesmo que visualmente ele esteja atrás como background dos Reactions, no html ele é irmão, com isso foi feito uma outra animação específica pra ele, algo bem simples, apenas dando um show.

Os Reactions

Conforme se vê abaixo, é chamado o sprite dos Reactions e seus elementos de exibição (width, height, position, top, etc). Os reactions inicia com opacidade, 0 scale 10%, e o transform-origin. Lembrando que eles serão exibidos quando o elemento pai (.box) receber o hover do mouse e/ou quando o input for checado.

1. [class*="reaction-"] {
2. border: none;
3. background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/sqhTN9lgaYm.png);
4. background-color: transparent;
5. display: block;
6. cursor: pointer;
7. height: 48px;
8. position: absolute;
9. width: 48px;
10. z-index: 11;
11. top: -28;
12. transform-origin: 50% 100%;
13. transform: scale(0.1);
14. transition: all 0.3s;
15. outline: none;
16. will-change: transform;
17. opacity: 0;
18. }

Animando

Como temos aquele input[type=”checked], citado anteriormente, através do CSS, podemos usar o :hover, e o :checked desse input e gerar nossas interações mais fáceis em seus irmãos, ou seja, manipulado a opacidade e o scale dos Reactions, ao passar o mouse, ou clicar no like, ou navegar com o teclado checando o input escondido.

Se vocês repararem existe uma diferença de animação entre o primeiro Reactions e o último e isso foi resolvido bem simples, aplicando um delay pra cada um. (veja abaixo)

1. .box:hover .reaction-love {
2. transition-delay: 0.03s;
3. }
4. .box:hover .reaction-haha {
5. transition-delay: 0.09s;
6. }
7. .box:hover .reaction-wow {
8. transition-delay: 0.12s;
9. }
10. .box:hover .reaction-sad {
11. transition-delay: 0.15s;
12. }
13. .box:hover .reaction-angry {
14. transition-delay: 0.18s;
15. }

Pra finalizar, existe um outro comportamento aplicado em cada Reactions que exibe a legenda (inicia com opacidade 0), e muda no :hover e o :focus de cada Reaction para 1 na opacidade.
Inicialmemte eles estão escondidos e pequenos e ao passar o mouse ou receber o foco, são exibidos.

1. .box:hover [class*="reaction-"]:hover .legend-reaction,
2. .box:hover [class*="reaction-"]:focus .legend-reaction {
3. opacity: 1;
4. }

Bônus

A propriedade  will-change  otimiza animações, permitindo que o navegador sabe quais propriedades e elementos estão prestes a ser manipulados, aumentando potencialmente o desempenho dessa operação específica.

O will-change é uma recomentação do W3C, desde dezembro de 2015, e seu suporte aos navegadores atuais são bons, segundo o caninuse somente os IEs e o Edge não dão suporte atualmente.

Para saber mais sobre will change veja a documentação do W3C

1. [class*="reaction-"] {
2.   transform-origin: 50% 100%;
3.   transform: scale(0.1);
4.   transition: all 0.3s;
5.   will-change: transform, opacity;
6. }

Em resumo

O grande segredo então seria conhecer algumas propriedades de animação como, translate, transform, opacity, visibility, e lembrar que podemos manipular elementos irmãos com :checked ou :hover do pai e manipular seus elementos filhos.

Veja o demo

See the Pen wGvbwY by Deivid Marques (@deividmarques) on CodePen.

Conclusão

Inicialmente criei as interações acontecendo apenas no click do elemento, porém no resultado final mudei para o hover do mouse, e também deixei funcionando ao usar a tecla TAB, sendo foi possível navegar pelos “Reactions” com o teclado também.

Utilizei HTML e SASS, claro que daria pra fazer de outras maneiras, escrever menos códigos, até mesmo usando funções do sass em alguns lugares, mas isso ficará pra próxima versão.

O intuito de criar esse pequeno exemplo foi me divertir e também em mostrar os poderes que o CSS têm ao se criar essas micro interações.

O resultado por ser conferido aqui