Animações de borda CSS

Analisando várias maneiras de animar uma borda em CSS

Bramus

Como definir bordas

Há alguns métodos disponíveis para definir uma borda em um elemento: border, outline e box-shadow. Conforme detalhado em The 3 CSS Methods for Adding Element Borders (em inglês), de Stephanie Eckles, cada abordagem tem vantagens e desvantagens, especialmente quando se trata de animar as bordas. O principal motivo para não usar um border CSS adequado é para fins de animação.

Animações de borda usando outline-offset, de Kevin J. Powell

Um artigo que chamou minha atenção recentemente é Animação fantástica de borda CSS, 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 me chama a atenção são as visualizações animadas usadas no artigo. Eles ajudam a explicar exatamente o que está sendo feito para alcançar o efeito desejado.

Animações de borda usando conteúdo gerado por Coco

A camada branca e as linhas coloridas são conteúdo gerado. Ao aumentar e diminuir o esmaecimento da camada branca, fica claro como elas se empilham 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 você acaba com um modelo de caixa quebrado: o conteúdo agora pode ocultar a borda falsa porque essa "borda" é pintada por baixo. Para mitigar, é preciso aplicar o border-width desejado como o padding.

Para ter uma borda verdadeira e, assim, manter o funcionamento do modelo de caixa, use vários planos de fundo que você estende para a área da borda.

Noções básicas

Vamos começar criando uma borda pontilhada e adicionando os 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
  )
;

Dimensionar os planos de fundo com background-origin

Como você pode ver, há algo estranho 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, as 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, o que gera um efeito visual estranho.

Para resolver esse problema, é preciso esticar o plano de fundo para que ele também ocupe o tamanho da borda. Você pode 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.

Browser Support

• 1
• 12
• 4
• 3

Source

O que não fazer

/* 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%);

O que fazer

background-origin: border-box;

Essa adição faz tudo parecer muito melhor:

Como reduzir a camada de plano de fundo branca com background-clip

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

Browser Support

• 1
• 12
• 4
• 5

Source

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

Por fim, defina a borda como transparent para ter o efeito completo.

border: 0.3rem dotted transparent;

Animação

Para restaurar a animação da borda, manipule o ângulo inicial do 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 se torna muito fácil nos navegadores compatíveis:

Browser Support

• 85
• 85
• 128
• 16.4

Source

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

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

Combinando tudo, o código fica assim:

Conteúdo bônus: border-image

Uma abordagem já abordada para desenhar uma borda de gradiente é usar o CSS border-image.

Browser Support

• 16
• 12
• 15
• 6

Source

Ele 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ê vai notar que algumas coisas não funcionam mais com essa abordagem:

• O border-image não segue o border-radius. Ele sempre vai permanecer retangular.
• Ao definir border-image-slice como preenchimento, o border-image não é pintado abaixo do background definido, mas acima. Isso pode ser um problema se você quiser que o plano de fundo seja semitransparente.

Conclusão

Há uma infinidade de possibilidades para animar bordas em CSS. Dependendo do caso de uso, você pode se inclinar para um ou outro.