Utilizando o comando transition disponível no CSS3 é possível  fazer com que um determinado elemento se transforma, seja animado. Para entender melhor como isso acontece vamos a um exemplo prático.

transition-css3-1

Primeiro você deve inserir o comando diretamente no elemento. Em seguida, com um conjunto de comandos, a animação acontece. Perceba que a largura original da div é 100px. No efeito hover adicionado essa div passará a ter 600px. Utilizando o comando transition é possível então determinar em quanto tempo e qual a propriedade que será modificada. No caso do exemplo o tamanho (width) será alterado a cada 2 segundos até que a div chegue na largura de 600px.

transition-css3-2 transition-css3-3 transition-css3-4

Esse recurso hoje está disponível para todos os navegadores em suas versões mais atualizadas, exceto a versão 9 e anteriores do Internet Explorer. Para o Safari uma sintaxe diferente é adicionada, mas seguindo a mesma lógica do comando.

fonte: www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Você pode gostar de…

A autenticação de dois fatores (A2F) com Scriptcase

A autenticação de dois fatores (A2F) ou autenticação em duas etapas (Two-factor authentication o...

Configurando log de segurança em aplicações

Utilizando um esquema de logs de segurança é possível rastrear todas as ações de determinado us...

Permitindo Acesso Remoto ao MySQL

Olá a todos! Por padrão, ao instalar, o MySQL não é habilitado para acesso externo. Portanto,...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.