CSS3 Transitions
transições CSS3 permite alterar os valores de propriedade sem problemas (de um valor para outro), durante um determinado período.
Exemplo: Passe o mouse sobre o elemento abaixo para ver um efeito de transição CSS3:
Suporte navegador para Transitions
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Como usar CSS3 transições?
Para criar um efeito de transição, você deve especificar duas coisas:
- a propriedade CSS que você deseja adicionar um efeito a
- a duração do efeito
Nota: Se a parte duração não for especificado, a transição não terá nenhum efeito, porque o valor padrão é 0.
O exemplo a seguir mostra um 100px * 100px vermelho <div> elemento. O <div> elemento também especificou um efeito de transição para a propriedade de largura, com uma duração de 2 segundos:
Exemplo
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
O efeito de transição vai começar quando a propriedade CSS especificado (largura) altera o valor.
Agora, vamos especificar um novo valor para a propriedade de largura quando o usuário passa o mouse sobre o <div> elemento:
Observe que quando os mouses cursor para fora do elemento, ele vai mudar gradualmente de volta a seu estilo original.
Alterar Vários valores de propriedade
O exemplo a seguir adiciona um efeito de transição para a largura ea propriedade de altura, com uma duração de 2 segundos para a largura e 4 segundos para a altura:
Exemplo
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Tente você mesmo " Especifique o Curve velocidade da transição
A transition-timing-function propriedade especifica a curva de velocidade do efeito de transição.
A propriedade-timing-function transição pode ter os seguintes valores:
-
ease- especifica um efeito de transição com um início lento, em seguida, rapidamente, em seguida, terminar lentamente (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 um início lento -
ease-out- especifica um efeito de transição com um final lento -
ease-in-out- especifica um efeito de transição com um início lento e no final -
cubic-bezier(n,n,n,n)- permite definir seus próprios valores em um cubic-bezier função
O exemplo a seguir mostra a algumas das diferentes curvas de velocidade que podem ser utilizados:
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;} Tente você mesmo " Atrasar o efeito de transição
A transition-delay propriedade especifica um atraso (em segundos) para o efeito de transição.
O exemplo a seguir tem um atraso de 1 segundo antes da partida:
Transição + Transformation
O exemplo a seguir adiciona também uma transformação para o efeito de transição:
Exemplo
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Tente você mesmo " Mais exemplos de transição
As propriedades de transição CSS3 pode ser especificado um por um, como este:
Exemplo
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Tente você mesmo " ou usando a propriedade estenográfica transition :
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Propriedades CSS3 Transição
A tabela a seguir lista todas as propriedades de transição:
| Propriedade | Descrição |
|---|---|
| transition | Um atalho 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 completar |
| transition-property | Especifica o nome da propriedade CSS o efeito de transição é para |
| transition-timing-function | Especifica a curva de velocidade do efeito de transição |