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…

Dicas de auxilio para desenvolvedores

Já sabemos que o scriptcase é uma excelente ferramenta e agiliza muito no desenvolvimento de siste...

Processamento de Dados a partir de Formulário do Tipo Controle: Utilizando macros de consulta e inserção a Base de Dados

  O processamento dos dados pode ser realizado a nível de Base de Dados com procedimentos a...

Recepção de Parâmetros via GET em Aplicações do Tipo Formulário

Enviar um parâmetro a uma aplicação é sempre fácil quando feito dentro do ambiente do Scriptca...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.