tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS transições


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:

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:

Exemplo

div:hover {
    width: 300px;
}
Tente você mesmo "

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:

Exemplo

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
Tente você mesmo "

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 :

Exemplo

div {
    transition: width 2s linear 1s;
}
Tente você mesmo "

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