Como animar gradientes de texto e padrões no CSS – SitePoint

Nesta dica rápida, mostraremos como é fácil animar um gradiente de fundo com CSS.

Em um artigo recente, mostramos Como definir um gradiente de fundo no texto. A demonstração do Codepen abaixo mostra o resultado.

Leia esse artigo se você não tiver certeza de como chegamos a esse resultado, pois desenvolveremos este exemplo abaixo.

Por uma questão desta demonstração, vamos adicionar algumas cores extras ao nosso fundo de gradiente:

h1 {
  background-image: linear-gradient(
    45deg,
    #ffb3ba,
    #c49c6e,
    #bfbf76,
    #77b084,
    #ff7e74,
    #3b82f6,
    #c084fc,
    #db2777
   );
}

Se desligarmos background-clip: text e text-color: transparent Por um momento, temos uma noção melhor de como nosso gradiente preenche a caixa de conteúdo do texto.

Agora vamos passar pelas etapas de animar nosso gradiente de fundo.

Etapa 1: Ajustando o tamanho do fundo

Para animar nosso histórico de gradiente, precisamos torná -lo maior que a caixa de conteúdo do texto para que não possamos ver tudo de uma vez. Podemos fazer isso com o prático background-size propriedade. (Você pode Leia tudo sobre o tamanho de fundo aqui.)

Vou definir a largura do nosso gradiente de segundo plano para três vezes a largura do nosso elemento de cabeçalho:

h1 {
  background-size: 300% 100%;
}

Agora, apenas um terço do fundo do gradiente será visível a qualquer momento, como visto abaixo.

Etapa 2: Definindo uma animação

Em seguida, configuraremos uma animação que moverá o plano de fundo para que veremos diferentes partes dela com o tempo.

Podemos configurar uma regra simples de animação como assim:

h1 {
  animation: gradientAnimation 8s linear infinite;
}

Isso moverá o fundo para frente e para trás uma vez a cada 16 segundos.

Em seguida, vamos configurar um @keyframes declaração:

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

Isso simples @keyframes A declaração moverá nosso plano de fundo do canto superior esquerdo para o canto inferior direito a cada oito segundos.

Na caneta abaixo, mais uma vez desativamos background-clip: text e color: transparent Para que possamos ver o que está acontecendo em segundo plano.

Uma vez que reativamos background-clip: text e color: transparentvemos o produto acabado.

Muito legal!

Animando uma imagem de fundo

Em nosso artigo sobre a adição de efeitos e padrões de gradiente ao texto, também usamos uma imagem de fundo floral. (Ver a caneta para isso aqui.)

Vamos tentar animar esse fundo também. Faremos de maneira um pouco diferente, pois não queremos distorcer a imagem de fundo.

Vamos remover background-size: contain da demonstração original e não defina um tamanho de fundo. Isso nos deixa com isso:

h1 {
  color: transparent;
  -webkit-background-clip: text; 
  background-clip: text; 
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

O resultado é mostrado na demonstração do Codepen abaixo.

Tente desligar background-clip: text e text-color: transparent Por um momento, se você quiser ver o que está acontecendo em segundo plano.

Nossa imagem em segundo plano está repetindo por padrão, o que não parece muito ruim para essa imagem em particular. (Só de interesse, tente adicionar background-repeat: no-repeat Para ver o que acontece sem um fundo repetido.) Em outras situações, onde a imagem de fundo não é tão bem, você pode impedir a repetição da imagem e depois usar background-size Para aumentar a imagem, como fizemos com o fundo do gradiente acima. Por exemplo:

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
}

Aqui está o efeito de fazer isso em nossa demonstração floral.

Conclusão

Poderíamos fazer animações muito mais espetaculares que isso, mas o objetivo era mantê -lo simples aqui. Você pode se aprofundar nos quadros de chave CSS e animações em Como começar com a animação CSS. Você também pode brincar com o momento da animação, ângulo do gradiente e assim por diante.

Como mencionado no artigo anterior, divirta -se com isso, mas não exagere, pois muito desse tipo de animação pode se tornar irritante. Um fundo de animação sutil em um título pode acrescentar esse toque de interesse ou intrigas que você precisa para manter seu público envolvido.