CSS Transition e CSS Animation

csstransitioncssanimation_topo

Um guia rápido pra você entender e começar a usar essas duas propriedades do CSS3.

TRANSITION. PRAZER!

“Com CSS3, podemos adicionar um efeito quando o navegador troca de um estilo para outro, sem usar animações em Flash ou JavaScript.” – w3schools

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.

  1. div {
  2. display: block;
  3. background-color: #666;
  4. width: 100px;
  5. height: 40px;
  6. border: solid 5px red;
  7. }
  8. div:hover { border: solid 5px black; }

É 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.

“CSS transitions permite que as mudanças nos valores das propriedades CSS ocorram suavemente sobre uma duração especificada.” – w3c

Nesse exemplo, passe o mouse sobre o logo do Tableless abaixo e veja um exemplo da propriedadetransition 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
  • 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 allAqui você encontra uma tabela com todas as propriedades que suportamtransition.

  1. transition-property: border-color;

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.

  1. transition-duration: 1s;

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:

lineareaseease-inease-out e ease-in-out;

  1. transition-timing-function: linear;

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

  1. transition-timing-function: cubic-bezier(0.005, 0.625, 0.365, 0.0840);

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).

  1. transition-delay: 0.1s;

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 transitionque ela agrupa as quatro propriedades específicas que vimos acima. As palavras mágicas e a ordem são as seguintes:

  1. div { transition: |property| |duration| |timing-function| |delay|; }

O exemplo visto acima ficaria dessa maneira:

  1. div { transition: border-color 1s linear 0.1s; }

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:

  1. div > a {
  2. display: block;
  3. transition: opacity 0.5s;
  4. }

Podemos notar que as propriedades timing-function e delay foram omitidas. Com isso, elas assumem seus valores default que são ease e 0 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:

  1. div { transition: opacity 0.5s, padding 0.25s; }

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 é 0.

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

  1. div { transition: all 1s linear; }

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á 0.

SUPORTE

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

Fonte: Can I Use

ANIMATION

“Com CSS3, conseguimos criar animações que podem substituir imagens animadas, animações em Flash e JavaScript em muitas páginas web” – w3schools

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:

  1. @keyframes nomedaanimacao {
  2. seletores-keyframe { estilo css para esse determinado keyframe; }
  3. }

Existem duas maneiras para se criar nossos amigos keyframes:

  1. @keyframes animacao {
  2. from {
  3. width: 100px;
  4. background: black;
  5. }
  6. to {
  7. background: yellow;
  8. width: 200px;
  9. }
  10. }

É 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%).

  1. @keyframes animacaoBolada {
  2. 0% {
  3. background: black;
  4. width: 100px;
  5. }
  6. 25% { background: green; }
  7. 50% { background: blue; }
  8. 75% { background: red; }
  9. 100% {
  10. background: yellow;
  11. width: 200px;
  12. }
  13. }

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;

  1. animation-name: animacaoBolada;

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

  1. animation-duration: 5s;

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:

lineareaseease-inease-out e ease-in-out;

  1. animation-timing-function: ease;

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

  1. animation-timing-function: cubic-bezier(0.005, 0.0625, 0.365, 0.0840);

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

  1. animation-delay: 0.2s;

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.

  1. animation-iteration-count: 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).

  1. animation-direction: reverse;

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

  1. animation-play-state: running;

MONTANDO O BOLO…

  1. div {
  2. animation-name: animacaoBolada;
  3. animation-duration: 5s;
  4. animation-timing-function: ease;
  5. animation-delay: 1s;
  6. animation-iteration-count: infinite;
  7. animation-direction: alternate;
  8. animation-play-state: running;
  9. }

ESCREVENDO MENOS…

Da mesma forma que a propriedade transition, também é possível encurtar a sintaxe em umshortcode. 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:

  1. div {
  2. |name| |duration| |timing-function| |delay| |iteration-count| |direction| |play-state|;
  3. }

bolo acima ficaria dessa maneira:

  1. div { animation: animacaoBolada 5s ease 1s infinite alternate; }

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

 

Fonte: Tableless

Postagens Relacionadas