> ## Content Index
> Fetch the complete content index at: https://productoversee.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# CSS Transition e CSS Animation
- URL: https://productoversee.com/blog/css-transition-e-css-animation/
- Published: 2013-04-19T03:00:00.000Z
- Updated: 2023-02-22T01:48:13.000Z
- Description: Um guia rápido pra você entender e começar a usar essas duas propriedades do CSS3.
- Author: Raphael Fabeni
- Tags: Desenvolvimento, #blog

## **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](https://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/?ref=productoversee.com) 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](https://codepen.io/raphaelfabeni/full/Fkbej?ref=productoversee.com), 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](https://www.w3.org/TR/css3-transitions/?ref=productoversee.com#animatable-properties-) 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](https://matthewlein.com/ceaser/?ref=productoversee.com) 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](https://caniuse.com/css-transitions?ref=productoversee.com) 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](https://cdpn.io/eCGhx?ref=productoversee.com) 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](https://cdpn.io/qHkgJ?ref=productoversee.com) e [2](https://cdpn.io/csubG?ref=productoversee.com)) em conjunto com a propriedade *transform*.

### **Suporte**

- **IE** 10
- **FF** 5
- **Chrome** 4
- **Safari** 4
- **Opera** 12

Fonte: Can I Use