Keyframes CSS

Em nosso blog já falamos sobre as propriedades transform e transition e conseguimos criar alguns efeitos interessantes somente utilizando estes dois incríveis recursos presentes no CSS3. Porém, uma outra propriedade pode ser muito útil quando se trata de animações, a animation.

A propriedade animation consegue ir além das transformações e transições e permite um controle maior sobre a execução das animações, repetições e até adiar os efeitos por alguns segundos. Além de diversas opções de configuração, como o animation-delay para um tempo de espera antes da animação, o animation-play-state para definir se a animação está sendo executada ou não e o animation-iteration-count para definir quantas vezes ela deve ser executada, podemos definir diversos pontos de quebra nos efeitos que queremos fazer, e não apenas o início e fim como fazemos com as transições. O que permite toda essa flexibilidade é a definição dessas regras utilizando @keyframes, onde definimos propriedades em pontos específicos das animações, utilizando porcentagens.

Nossa primeira animação será fazer uma entrada animada para um título da sua página. Para isso só vamos precisar de um h1.

<h1>Bem vindo!</h1>

h1 {

color: #000;

font-size: 1.4em;

text-align: center;

}

Um começo bastante simples, agora vamos adicionar a animação, que irá trabalhar a opacidade e o tamanho do elemento, utilizando transform.

h1 {

animation: appear 2s 0 linear;

color: #000;

font-size: 1.4em;

text-align: center;

}

Assim como o transform e o transition são utilizados como atalhos para definir várias opções de uma vez só, o animation pode compor diversos valores. No nosso caso, estamos utilizando a animação chamada appear (animation-name), com 2 segundos de duração (animation-duration), a ser executada imediatamente (animation-delay em 0) e com um progresso linear (animation-timing-function). Mas, em nenhum momento definimos do que é composta essa animação. Precisamos então definir um grupo de regras para ela utilizando uma seção de @keyframes:

@keyframes appear {

0% {

opacity: 0;

transform: scale(2);

}

70% {

opacity: 1;

transform: scale(1);

}

100% {

transform: scale(1.2);

}

}

Dentro da seção de @keyframes, é possível definir pedaços de CSS que serão aplicados em um ponto especfico da animação fazendo referência a porcentagem do progresso – já que a duração em si é definida em outro ponto. A transição de um ponto para outro será feita da mesma forma que as transições são executadas, utilizando a função de progresso do animation-timing-function.

Aqui, estamos começando a animação com o elemento com seu tamanho dobrado (usando o scale) e sem opacidade nenhuma, aos 70% da animação (com a nossa animação de 2 segundos, isso seria aos 1.4s) o elemento deve ter a sua opacidade normalizada e o tamanho regular, e a animação será finalizada (ao completar os 2 segundos) com o elemento em uma escala de 1.2. Após isso, qualquer mudança presente na animação irá desaparecer e o elemento voltará ao normal. Para isso, vamos levar a definição de scale(1.2) para o estilo do h1 e adicionar um transform-origin para centralizar o efeito de escala.

h1 {

animation: appear 2s 0 linear;

color: #000;

font-size: 1.4em;

text-align: center;

transform: scale(1.2);

transform-origin: 50% 50%;

}

Com o controle sobre diversos pontos das animações e das diversas opções de configuração, conseguimos criar efeitos que vão além do transition e transform, apesar da necessidade de escrever um número maior de linhas dependendo do resultado desejado.

Você provavelmente já viu o universo de gifs animados que são utilizados para informar quando algum processamento está sendo realizado e que devemos esperar a página carregar algo novo em algum momento – os chamados loaders. Agora não precisamos mais de imagens dest tipo e podemos utilizar apenas CSS (e talvez um pouco de JavaScript), para replicar esse componente e conseguir mudar tamanhos e cores com apenas algumas linhas de código.  Primeiro, precisamos apenas de um span, já que o nosso exemplo para ilustrar essa função será bastante minimalista.

<span class=’loading’ title=’Carregando…’>Carregando…</span>

.loading {

background-color: #666;

border-radius: 50%;

font: 0/0 serif;

position: absolute;

}

Definimos um fundo escuro, bordas redondas o suficiente para garantir que o elemento apareça como um círculo, e uma fonte zerada para esconder o texto do span – Mas e o tamanho? E os efeitos? Tudo isso irá na nossa animação, com as regras abaixo:

@keyframes pulse {

0% {

width: 0;

height: 0;

opacity: 1;

top: 50px;

left: 50px;

}

100% {

width: 30px;

height: 30px;

opacity: 0;

top: 35px;

left: 35px;

}

}

Enquanto a nossa esfera vai aumentando de tamanho – de 0 a 35 px – ela vai sendo apagada pela mudança de opacidade. As mudanças de top e left garantem que ela ficará centralizada no seu lugar e não irá se mover na página devido a mudança de tamanho. Para utilizar essa animação pulse no nosso loader com o efeito desejado, precisamos definir que ele será animado infinitamente.

.loading {

animation: pulse 1.5s infinite;

background-color: #666;

border-radius: 50%;

font: 0/0 serif;

position: absolute;

}

Podemos usar infinite como um valor para o animation-iteration-count, e a animação será executada sem interrupções – podemos apenas adicionar um pouco de JavaScript para esconder e exibir o loader quando for necessário. Caso seja necessário mudar a cor ou aumentar o tamanho para adequar a interfaces diferentes, só precisamos alterar algumas linhas de CSS, sem precisar criar imagens novas em um editor e executar mais requisições HTTP para servir as imagens.

A utilização do recurso @keyframe vem como um alívio para os desenvolvedores que poderão ganhar muito mais velocidade em suas aplicações. Ao deixar a cargo do navegador do cliente uma série de controles de elementos animados, a página WEB foca em garantir a entrega da informação com mais velocidade. Animações em flash, por exemplo, que antes pesavam nos dois lados da conexão, hoje podem ser substituídas por um recurso muito mais qualificado e principalmente otimizado.

6

Source: scriptcase / Keyframes CSS

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.