CSS Transition e CSS Animation

Transition. Prazer!

Mostrar um feedback ao usuário quando ele passar o mouse sobre um link (:hover) ou quando ele der foco em um campo input (:focus) são boas práticas. Há muitos jeitos de fazermos isso: mudando a cor do texto, tirando o underline da palavra, alterando a borda do input que recebeu o foco ou até alterando a cor de background do elemento. (Esse artigo da Smashing Magazine trata muito bem a questão da estilização de links).

Normalmente fazemos isso alterando o valor de uma propriedade CSS no estado :hover ou :focus do elemento. Quando fazemos isso, o resultado é instantâneo. Melhor dizendo, a alteração ocorre imediatamente ao usuário fazer a ação (seja passar o mouse sobre o elemento ou este ganhar foco). A alteração ocorre de forma brusca, do valor antigo da propriedade para o novo valor. Por exemplo, quando temos um elemento com borda colorida, e utilizamos o estado :hover para alterarmos a cor da borda, essa transição entre uma cor e outra acontece imediatamente assim que você passa o mouse em cima do elemento.

É aí que entra a transition do CSS3. Ela analisa a mudança de valor entre a propriedade e faz com que essa transição, ao invés de ocorrer de forma brusca, ocorra suavemente em um tempo determinado.

Nesse exemplo, passe o mouse sobre o logo do Tableless abaixo e veja um exemplo da propriedade transition em conjunto com a propriedade transform.

Tá legal, entendi. Mas como faz?

A propriedade transition possui quatro propriedades para você configurar:

• transition-property*,
• transition-duration*,
• transition-timing-function
• e transition-delay.

* propriedades obrigatórias na declaração. As demais caso omitidas, assumem seu valor default. transition-property: Nome da propriedade CSS sobre a qual o efeito da transição vai ser aplicado. É obrigatória na declaração pois caso seja omitida, não existirá uma propriedade para se aplicar o efeito da transição. É possível ainda aplicar uma mesma transição para todas as propriedades CSS do elemento, basta colocar o valor all. Aqui você encontra uma tabela com todas as propriedades que suportam transition.

transition-duration: Duração do efeito em segundos (o padrão é 0). Também é obrigatória na declaração pois, se omitida, assume seu valor default que é zero e a transição não vai ter efeito.

transition-timing-function: Forma como a transição progride no tempo (o padrão é ease). Falando de um jeito mais fácil, é como se comporta o ritmo da transição durante o efeito. Pode ser usado de duas maneiras: uma é utilizando alguns valores já pré-definidos que são:

linear, ease, ease-in, ease-out e ease-in-out;

…e a outra é definindo uma função customizada, especificando quatro coordenadas para definir a cubic bezier curve:

Esse site ajuda e muito. Tanto para entender o funcionamento da cubic bezier, quanto para customizar a sua própria transição.

transition-delay: Define a partir de quanto tempo (em segundos) o efeito da transição vai se iniciar (o padrão é 0).

Passe o mouse sobre o retângulo cinza no exemplo abaixo para ver a transition em ação:

*Nos exemplos a seguir, para facilitar a leitura, não utilizei prefixos. Mas, recomendo que dêem uma olhada no Can I Use para usar os prefixos correspondentes para cada browser.

No exemplo acima, a propriedade que recebeu o efeito da transição é a border-color, a duração do efeito é de 1 segundo, o efeito (ou ritmo) é linear e o delay para a transição se iniciar é de 0.1 segundo.

Escrevendo menos…

É possível encurtar a sintaxe em um shortcode bem simples. Basta declarar a propriedade transition que ela agrupa as quatro propriedades específicas que vimos acima. As palavras mágicas e a ordem são as seguintes:

O exemplo visto acima ficaria dessa maneira:

Um outro exemplo, agora adicionando o efeito da transição na opacidade:

No exemplo acima, se olharmos a aba do CSS identificamos a seguinte chamada:

Podemos notar que as propriedades timing-function e delay foram omitidas. Com isso, elas assumem seus valores default que são ease e __ respectivamente.

E mais de uma propriedade.. tem como?

É possível aplicar transições diferentes para mais de uma propriedade em um mesmo elemento. Para isso é só você separar cada bloco de declaração de efeito com vírgulas:

No código acima definimos duas transições:

• a primeira com o efeito da transição aplicado na opacidade, que já havia sido configurada no exemplo anterior;
• a segunda que define que a propriedade a receber o efeito da transição é o padding, a duração vai ser de 0.25 segundos, o ritmo como está omitido assume seu valor default que é ease e o delay, como também está omitido, assume seu valor default que é __.

É possível ainda definir uma transição padrão para todas as propriedades de um elemento:

No caso, definimos o valor all para a property, o que significa que todas as transições do elemento terão a duração de 1 segundo, o ritmo será linear e o delay será __.

Suporte

• IE 10
• FF 1
• Chrome 4
• Safari 3.1
• Opera 10.5

Fonte: Can I Use

Animation

A regra dos keyframes

Indo direto ao ponto: É aonde as animações são criadas.

Um keyframe descreve como o elemento que vai ser animado, deve ser renderizado em uma determinada fase, durante a sequência da animação.

Ou seja, cada keyframe contém uma ou mais propriedades CSS que vão ser aplicadas no elemento que será ser animado e, a animação se encarrega de mudar de um keyframe para outro, aplicando a transição entre as mudanças de CSS.

A sintaxe para a criação de keyframes é a seguinte:

Existem duas maneiras para se criar nossos amigos keyframes:

É a forma mais básica, onde definimos um início e um fim para a animação. No exemplo acima, from é equivalente ao início da animação (0%) e to é equivalente ao final da animação (100%).

Já essa é a maneira que temos maior controle da animação. Para isso, utilizamos porcentagem para definir os keyframes. No código acima, a animação possui 5 passos e, a porcentagem é relativa à duração da animação que vai ser definida posteriormente.

Com a animação criada nos keyframes, precisamos vinculá-la a algum seletor, caso contrário a animação não terá nenhum efeito. Para fazer isso, temos que declarar pelo menos duas propriedades que são obrigatórias:

• o nome da animação (igual ao especificado nos keyframes);
• a duração da animação (se não for declarada, a animação não se inicia pois o valor padrão é 0).

Confira no exemplo as animações com os dois modelos de keyframes citados acima:

Mas a animation do CSS3 possui mais propriedades. Vamos conhecer as outras….

As propriedades

animation-name: Nome da animação especificada nos @keyframes;

animation-duration: Quanto tempo, em segundos ou milisegundos, durará um ciclo da animação (o padrão é 0).

animation-timing-function: Forma como a animação progride no tempo (o padrão é ease). Do mesmo modo que a propriedade transition, pode ser usada de duas maneiras: uma é utilizando alguns valores já pré-definidos que são:

linear, ease, ease-in, ease-out e ease-in-out;

… e a outra é definindo uma função customizada, especificando quatro coordenadas para definir a cubic bezier curve:

animation-delay: Define a partir de quanto tempo a animação vai se iniciar (o padrão é 0).

animation-iteration-count: Determina o número de vezes que a animação vai se repetir (o padrão é 1). Podemos deixar a animação repetindo infinitamente, basta especificar o valor infinite.

animation-direction: Especifica se ao final da animação, ela deve reiniciar seu fluxo normalmente (normal), que é o padrão, ou voltar no sentido inverso (reverse).

animation-play-state: Define se a animação está rodando (running), que é o padrão, ou pausada (paused).

Montando o bolo…

Escrevendo menos…

Da mesma forma que a propriedade transition, também é possível encurtar a sintaxe em um shortcode. Basta declarar a propriedade animation que ela agrupa todas as propriedades que vimos acima. As palavras mágicas e a ordem são as seguintes:

O bolo acima ficaria dessa maneira:

Mais dois exemplos (1 e 2) em conjunto com a propriedade transform.

Suporte

• IE 10
• FF 5
• Chrome 4
• Safari 4
• Opera 12

Fonte: Can I Use