Como usar transições CSS3

Todo mundo ama o movimento. A adição da quarta dimensão (tempo) ao design de um site é a principal maneira como o design baseado em tela se destaca do design de impressão. As Transições CSS são um método simples para animar propriedades de um elemento, permitindo que você enriqueça certos eventos em seu design da Web, sem a necessidade de Flash ou JavaScript.

O W3C descreve apropriadamente as transições em seu site, já que “CSS Transitions permite que as alterações de propriedade nos valores de CSS ocorram sem problemas ao longo de uma duração específica”. Em outras palavras, as transições CSS nos permitem modificar uma propriedade de forma incremental, criando uma sensação de movimento e imbuindo designs com sutileza e emoção que não é possível com uma mudança rápida.

Suporte de Navegador

Todos os navegadores modernos (sim, até mesmo IE!) Agora suportam transições CSS. No entanto, mais importante, se as transições não forem suportadas no navegador em uso, a transição será ignorada e as alterações de propriedade serão aplicadas instantaneamente. Essa degradação graciosa é uma pedra angular das melhores práticas.

Para ampliar o alcance do suporte ao navegador, podemos usar prefixos de fornecedores, o que amplia o recurso para incluir o Firefox 4-15, o Opera 10.5-12 e a maioria das versões do Chrome e Safari. O código, incluindo as alternativas de prefixo do fornecedor, é assim:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

A propriedade não prefixada é adicionada na parte inferior da pilha para garantir que a implemantação final supere todas as outras, conforme a propriedade passa do status de rascunho para o status final.

Parâmetros de transição

Existem quatro parâmetros para transições CSS:

• propriedade de transição: a propriedade a ser interpolada ou a palavra-chave 'all' para aplicar a todas as propriedades;
• duração da transição: a duração da transição;
• função de temporização de transição: a flexibilização a ser aplicada cria um movimento mais natural
• transtion-delay: especifica um atraso no início da transição.

Além disso, você também pode usar a propriedade abreviada (como no exemplo acima), onde os parâmetros são especificados como propriedade, duração, função de temporização, atraso.

Propriedades que podem ser transicionadas

Você só pode fazer a transição de propriedades que podem ser convertidas em um valor matemático. Por exemplo, você pode fazer a transição do tamanho da fonte; você não pode fazer a transição da face da fonte.

A lista completa de propriedades que podem atualmente ser transferidas é a seguinte:

posição de fundo, cor de fundo de borda, largura de fundo-inferior, cor de borda esquerda, largura de borda esquerda, cor de borda direita, largura de borda direita, espaçamento de borda, cor de borda superior, borda-largura-largura, inferior, clipe, cor, tamanho-fonte, peso-fonte, altura, esquerda, espaçamento entre letras, margem-inferior, margem-esquerda, margem-direita, margem-superior, max-altura, max- largura, min-altura, largura mínima, opacidade, cor de contorno, largura de contorno, fundo de preenchimento, preenchimento à esquerda, preenchimento à direita, preenchimento superior, à direita, texto-recuo, texto-sombra, superior, vertical alinhar, largura, espaçamento de palavras, índice z.

Usando transições

Declarações de transição são anexadas ao estado normal do elemento. Portanto, apenas declarado uma vez para vários estados, como: focus,: active e pseudo classes.

Usando o código a seguir, podemos configurar um menu básico e um parágrafo de texto. Ele é estilizado para que os itens de menu alterem sua cor e cor de fundo quando virados e para que o link embutido mude sua cor de sublinhado de branco para verde quando passar o mouse sobre:

Business
  Código 
  desenhar 
  Inspiração 
  Diversos 
  Móvel 
  Notícia 
  Recursos 
  Usabilidade 
  Integer posuere erat a ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Inteiro posuere erat a ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget me mollis ornare vel eu leo. 

Veja como fica:

Você usa o CSS3 Transitions? Quais efeitos você conseguiu criar? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem em movimento via Shutterstock.