Analisar várias maneiras de animar uma borda no CSS
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 aborder-radius
; ele sempre permanecerá retangular. - Ao definir
border-image-slice
para preencher, aborder-image
não é pintada abaixo do conjunto debackground
, 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.