Cores de fundo em CSS3 - Pante - sites • apps • sistemas

Baseado no tutorial anterior, onde aprendemos como criar uma animação de cores de fundo usando jQuery (confira aqui), hoje veremos como criar algo muito semelhante usando somente CSS3. Mais leve, mais rápido e com bem menos programação.

Passo 1: Vamos criar nossa classe CSS que vai receber a animação posteriormente, vamos chama-la de bg-animated. Nela, além da cor fixa de fundo (que vai servir como um fallback para navegadores que não aceitem CSS3), definiremos uma cor de background usando o degradê linear (linear-gradient – leia mais na W3) e background-size, que fará o dimensionamento do nosso efeito:

```
.bg-animated {
```
```
  background: #004f75;
```

  background: linear-gradient(45deg, #004f75, #018252, #665600, #590600, #59002f);

```
  background-size: 400%;
```

  -webkit-animation: animaFundo 10s ease infinite;

  -moz-animation: animaFundo 10s ease infinite;

  animation: animaFundo 10s ease infinite;

```
}
```

Note que o item linear-gradient possui no primeiro índice, “45deg”, traduzindo, é a posição em graus (45º) em que as cores devem aparecer.

Você pode brincar com estes valores, que vão de 0 a 360. Nos próximos índices (que podem ser quantos você desejar), definimos as cores que usaremos para o efeito (como exemplo, utilizei tons de azul, verde, laranja, vermelho e roxo).

O background-size faz com que a animação tenha mais efeito ou menos (valores menores que 100% praticamente param a animação, visto que o tamanho do fundo é o total do elemento onde ele estará).

Finalmente, criamos uma chamada à propriedade animation do CSS3. Note que ainda hoje utilizamos os vendor-prefixes (-webkit, -moz, etc), pois ainda existem usuários com versões antigas dos navegadores.

Animation?

Calma, a propriedade animation funciona da seguinte maneira:

1. Primeiro chamamos o nome da animação que criaremos depois, no nosso caso, a chamamos de “animaFundo”;

2. Depois definimos o tempo que ela dura, geralmente em segundos (s) ou milisegundos (ms). Aqui, usaremos 10 segundos;

3. Também podemos definir a suavidade da animação (ease, linear, step, cubic-bezier, etc). Aqui definimos que ela deve ter uma suavidade constante, por isso usamos o ease (um shorthand para ease-in-out);

4. Agora, definimos que ela deve rodar infinitamente.

Existem outros itens que você pode usar para criar suas animações, leia mais aqui.

Passo 2: Agora criaremos a nossa animação em si. Como chamamos antes, vamos nomeá-la animaFundo, e toda animação é criada usando a palavra “keyframes”:

```
@keyframes animaFundo {
```
```
	0% {
```
```
		background-position: 0% 50%
```
```
	}
```
```
	50% {
```
```
		background-position: 100% 50%
```
```
	}
```
```
	100% {
```
```
		background-position: 0% 50%
```
```
	}
```
```
}
```

Key…frames?

Não confunda com iframes 🙂

Nas animações com keyframes, costuma-se usar duas formas de “andamento”: com percentual (de 0% a 10%, 22%, etc., até 100%), ou com as propriedades “from” e “to”, que definem o início (from) e o fim (to) da sua animação.

Porém, temos de usar percentual pois estamos alterando somente a posição do fundo (background-position), e é aos 50% que a “mágica” acontece.

* Note que, conforme o código de exemplo, criamos somente a animação base, sem vendor-prefixes (sim, isso também existe aqui). Mas você pode criar as suas usando um gerador que automatiza esse trabalho, confira em: https://autoprefixer.github.io/

E é só isso. Para visualizar uma demonstração do tutorial, acesse: https://codepen.io/dimaspante/pen/zXpyBL

Cores de fundo animadas somente com CSS3

Animation?

Key…frames?