Transições CSS

Índice

Mostrar índice

Transições CSS

As transições CSS permitem alterar os valores das propriedades sem problemas, durante um determinado período.

Passe o mouse sobre o elemento abaixo para ver um efeito de transição CSS:

CSS

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

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Suporte do navegador para transições

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
transition	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 um efeito de transição, você deve especificar duas coisas:

a propriedade CSS à qual deseja adicionar um efeito
a duração do efeito

Nota: Se a parte da duração não for especificada, a transição não terá efeito, porque o valor padrão é 0.

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

Exemplo

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

O efeito de transição começará quando a propriedade CSS especificada (largura) mudar de valor.

Agora, vamos especificar um novo valor para a propriedade width quando um usuário passa o mouse sobre o elemento <div>:

Exemplo

div:hover
{
  width: 300px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

Observe que quando o cursor sai do elemento, ele gradualmente voltará ao seu estilo original.

Alterar vários valores de propriedade

O exemplo a seguir adiciona um efeito de transição para a propriedade largura e altura, com uma duração de 2 segundos para a largura e 4 segundos para a altura:

Exemplo

div
{
  transition: width 2s, height 4s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Especifique a curva de velocidade da transição

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

A propriedade transição-temporização-função pode ter os seguintes valores:

ease: - especifica um efeito de transição com início lento, depois rápido e final lento (este é o padrão)
linear: - especifica um efeito de transição com a mesma velocidade do início ao fim
ease-in: - especifica um efeito de transição com início lento
ease-out: - especifica um efeito de transição com final lento
ease-in-out: - especifica um efeito de transição com início e fim lentos
cubic-bezier(n,n,n,n): - permite definir seus próprios valores em uma função cúbica-bezier

O exemplo a seguir mostra algumas das diferentes curvas de velocidade que podem ser usadas:

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 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#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;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Atrasar o efeito de transição

A propriedade transition-delay especifica um atraso (em segundos) para o efeito de transição.

O exemplo a seguir tem um atraso de 1 segundo antes de iniciar:

Exemplo

div {
  
transition-delay: 1s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Transição + Transformação

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

Exemplo

div {
  transition: 
width 2s, height 2s, transform 2s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

Mais exemplos de transição

As propriedades de transição CSS podem ser especificadas uma por uma, assim:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

ou usando a propriedade abreviada transition:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Propriedades de transição CSS

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

transition: Uma propriedade abreviada para definir as quatro propriedades de transição em uma única propriedade
transition-delay: Especifica um atraso (em segundos) para o efeito de transição
transition-duration: Especifica quantos segundos ou milissegundos um efeito de transição leva para ser concluído
transition-property: Especifica o nome da propriedade CSS para a qual o efeito de transição se destina
transition-timing-function: Especifica a curva de velocidade do efeito de transição