Exemplo
Passe o mouse sobre um <div> elemento, e alterar a largura com um efeito de transição suave:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade de transição de propriedade especifica o nome da propriedade CSS o efeito de transição é para (the transition effect will start when the specified CSS property changes) .
Tip: Um efeito de transição poderia normalmente ocorrem quando um foco de usuário sobre um elemento.
Note: Sempre especifique a propriedade de transição de duração, caso contrário, a duração é de 0, ea transição não terá nenhum efeito.
| Valor padrão: | all |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.transitionProperty="width,height" Try it |
Suporte a navegadores
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-property | 26,0 4.0 -webkit- | 10.0 | 16,0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10,5 -o- |
CSS Syntax
transition-property: none|all|property|initial|inherit;Valores de propriedade
| Valor | Descrição |
|---|---|
| none | Nenhuma propriedade vai ter um efeito de transição |
| all | Valor padrão. Todas as propriedades vai ter um efeito de transição |
| property | Define uma lista separada por vírgulas de nomes de propriedades CSS o efeito de transição é para |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Passe o mouse sobre um <div> elemento, e alterar a largura e altura com um efeito de transição suave:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS3 Transitions
HTML DOM de referência: transitionProperty property