Animações de borda CSS

Analisar várias maneiras de animar uma borda no CSS

Bramus (em inglês)

Definição de bordas

Existem alguns métodos disponíveis para definir uma borda em um elemento: border, outline e box-shadow. Conforme detalhado em Os três métodos CSS para adicionar bordas de elementos (link em inglês), de Stephanie Eckles, cada abordagem tem suas próprias vantagens e desvantagens, especialmente quando se trata de animar as bordas. O principal motivo para não usar um CSS border adequado é para fins de animação.

Um artigo que chamou minha atenção recentemente é Animação de borda CSS fantástica, em que o autor Coco explorou mais opções. Ao injetar conteúdo gerado usando ::before e ::after, eles criam uma borda falsa que é animada.

O que mais se destaca são as visualizações animadas de apoio usadas no artigo. Eles realmente ajudam a explicar o que exatamente está sendo feito para alcançar o efeito desejado.

Tanto a camada branca quanto as linhas coloridas são o conteúdo gerado. Quando a camada branca é exibida para dentro e para fora, fica claro como elas são empilhadas e como a animação funciona.

Como manter o modelo de caixa

Uma desvantagem de usar o conteúdo gerado para imitar uma borda é que isso resulta em um modelo de caixa corrompido: o conteúdo agora pode obscurecer a borda falsa porque essa "borda" é pintada por baixo. Para atenuar, é necessário aplicar o border-width desejado como o padding.

Para ter uma borda verdadeira e manter o funcionamento do modelo de caixa, é possível usar vários planos de fundo, que depois você estende até a área da borda.

Noções básicas

Vamos começar criando uma borda pontilhada e adicionando vários planos de fundo.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

Redimensionando os planos de fundo com background-origin

Como você pode notar, há algo engraçado acontecendo com os planos de fundo aqui: eles estão pintados na borda, mas o conic-gradient parece estar todo errado. Esse é o comportamento esperado: por padrão, imagens de plano de fundo não são desenhadas na borda porque a origem delas é o padding-box do elemento. Para criar uma borda, as imagens de plano de fundo definidas são repetidas na própria borda, produzindo o efeito visual estranho.

Para resolver esse problema, você precisa esticar o plano de fundo para que também ocupe o tamanho da borda. É possível fazer isso manualmente esticando e reposicionando o plano de fundo, mas o melhor é usar a propriedade background-origin para dimensionar o plano de fundo em relação ao border-box.

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

Esta adição faz tudo parecer muito melhor:

Como reduzir a camada de fundo branco com background-clip

Com os planos de fundo ocupando todo o espaço agora, a camada semitransparente precisa ser reduzida novamente. Em vez de mexer em background-size novamente, há uma maneira mais fácil de fazer isso: use background-clip e defina-o como padding-box. Dessa forma, o plano de fundo não será mais desenhado abaixo da área da borda.

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

Por fim, faça a borda transparent para ter o efeito completo.

border: 0.3rem dotted transparent;

Animação

Para restaurar a animação da borda, é possível manipular o ângulo inicial da conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Graças a @property, isso é fácil nos navegadores compatíveis:

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Com tudo isso, o código fica assim:

Conteúdo bônus: border-image

Uma abordagem cobrida anteriormente para desenhar uma borda de gradiente é usar o CSS border-image.

Ela permite um código mais simplificado, já que você não precisa lidar com planos de fundo sobrepostos. A animação pode ser aplicada da mesma maneira que antes.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

No entanto, você perceberá que algumas coisas não funcionam mais com essa abordagem:

• O border-image não segue a border-radius; ele sempre permanecerá retangular.
• Ao definir border-image-slice para preencher, a border-image não é pintada abaixo do conjunto de background, mas acima dela. Isso pode ser problemático se você quiser que o plano de fundo seja semitransparente.

No encerramento

Existem inúmeras possibilidades para animar bordas no CSS. Dependendo do caso de uso, você pode usar um ou outro.