Transição CSS

Transição CSS

Transições CSS permitem que você mude suavemente os valores das propriedades em um período de tempo especificado.

Mova o mouse sobre este elemento para ver o efeito de transição CSS:

CSS

Neste capítulo, você aprenderá as seguintes propriedades:

  • transição
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Suporte do navegador para transições

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

propriedade Chrome IE Firefox Safari Opera
transição 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Como usar transições CSS?

Para criar efeitos de transição, é necessário especificar duas coisas:

  • Propriedade CSS que você deseja adicionar efeito
  • Duração do efeito

Atenção:Se não for especificado o período de duração, a transição não terá efeito, pois o valor padrão é 0.

O exemplo a seguir mostra um elemento <div> vermelho de 100px * 100px. O elemento <div> também tem efeito de transição definido para a propriedade width, com duração de 2 segundos:

exemplo

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Quando o valor da propriedade CSS (width) mudar, o efeito de transição começará.

Agora, vamos definir um novo valor para a propriedade width quando o mouse estiver sobre o elemento <div>:

exemplo

div:hover {
  width: 300px;
}

Experimente você mesmo

Por favor, note que quando o cursor sai do elemento, ele gradualmente volta ao seu estilo original.

Mudar vários valores de propriedades

O exemplo a seguir adiciona efeitos de transição às propriedades width e height, width é de 2 segundos e height é de 4 segundos:

exemplo

div {
  transition: largura 2s, altura 4s;
}

Experimente você mesmo

Especificar a curva de velocidade da transição

transition-timing-function A propriedade define a curva de velocidade do efeito de transição.

A propriedade transition-timing-function aceita os seguintes valores:

  • ease - Determina que a transição comece lentamente, acelere e termine lentamente (padrão)
  • linear - Determina que a transição tenha a mesma velocidade de início a fim
  • ease-in - Determina que a transição comece lentamente
  • ease-out - Determina que a transição termine lentamente
  • ease-in-out - Determina que a transição comece e termine mais lentamente
  • cubic-bezier(n, n, n, n) - Permite que você defina seus próprios valores nas funções de Bézier em três pontos

Os exemplos a seguir mostram alguns tipos diferentes de curvas de velocidade que podem ser usados:

exemplo

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Experimente você mesmo

Atraso do efeito de transição

transition-delay A propriedade define o atraso do efeito de transição (em segundos).

O exemplo a seguir tem um atraso de 1 segundo antes de começar:

exemplo

div {
  transition-delay: 1s;
}

Experimente você mesmo

Transição + Transformação

O exemplo a seguir adiciona efeitos de transição à transformação:

exemplo

div {
  transition: largura 2s, altura 2s, transformação 2s;
}

Experimente você mesmo

Mais exemplos de transição

Você pode especificar cada uma das propriedades de transição CSS, conforme mostrado a seguir:

exemplo

div {
  transition-property: largura;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Experimente você mesmo

ou use a abreviação transição propriedade:

exemplo

div {
  transition: largura 2s linear 1s;
}

Experimente você mesmo

Propriedades de transição CSS

A tabela a seguir lista todas as propriedades de transição CSS:

propriedade descrição
transição Atributo abreviado, usado para definir quatro propriedades de transição como uma única propriedade.
transition-delay Define o atraso da transição (em segundos).
transition-duration Define por quanto tempo ou milissegundos a transição deve durar.
transition-property Define o nome da propriedade CSS alvo da transição.
transition-timing-function Define a curva de velocidade da velocidade da transição.