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

Compartilhe este post

Você pode gostar de…

Te pagam pelo seu sistema ou pelo seu código?

Para todos aqueles que desenvolvem sistemas e softwares todos os dias durante o trabalho, você...

Mas afinal o que é Business Intelligence?

Com certeza você já deve ter ouvido sobre essa expressão, BI ou Business Intelligence, a questã...

Características importantes para um Desenvolvedor Web

Talvez em algum momento você já tenha se perguntado quais seriam as habilidades necessárias para...

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.