transições CSS3
transições CSS3
CSS3, temos de acrescentar um efeito que pode ser convertido a partir de um estilo para outro tempo, sem o uso de animação em Flash ou JavaScript. Passe o mouse sobre os seguintes elementos:
Passe o mouse sobre os seguintes elementos:
transição
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
| 属性 | |||||
|---|---|---|---|---|---|
| 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 isso funciona?
transição CSS3 é um elemento gradualmente mudar de um estilo para outro efeito.
Para conseguir isso, deve ser definido de duas coisas:
- Eu quero adicionar o efeito de propriedades CSS
- Especificar a duração do efeito.
Exemplos
atributo width aplicado efeito de transição, duração de 2 segundos:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Nota: Se vocênão especificar um limite de tempo, a transição não terá nenhum efeito, porque o valor padrão é 0.
O efeito irá alterar o valor da propriedade mudar CSS especificados. Uma mudança típica propriedade CSS é o mouse do usuário sobre um elemento:
Exemplos
Provisões quando a suspensão ponteiro do mouse (: hover) para o elemento <div> quando:
{
width: 300px;
}
tente »
Nota: Quando o cursor do mouse para o elemento, ele muda gradualmente o seu estilo original
Número de alterações
Para adicionar mais de um efeito do estilo de alterar, adicionar atributos separados por vírgulas:
Exemplos
efeitos largura, altura e em transição Adicionado:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
tente »
Propriedades de transição
A tabela a seguir lista todas as propriedades de transição:
| propriedade | descrição | CSS |
|---|---|---|
| transição | atalho para definir quatro propriedades de transição em uma propriedade. | 3 |
| de transição de propriedade | O nome da transição propriedade CSS disposições aplicam-se. | 3 |
| de transição de duração | Para definir o tempo de efeito de transição gasto. O padrão é 0. | 3 |
| transição-timing-function | transição curva de efeito tempo predeterminado. O padrão é "facilidade". | 3 |
| transition-delay | Disposições quando começar o efeito de transição. O padrão é 0. | 3 |
Os dois exemplos a seguir definir todos os atributos de transição:
Exemplos
Use todas as propriedades de transição em um exemplo:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
tente »
Exemplos
E exemplos dos mesmos efeitos de transição acima, mas utiliza as propriedades de transição reduzidas:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
tente »