OFERTAS ESPECIAIS DE 25 % OFF para compra e renovação!

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…

Criando um Site Gerenciável com Habemus e Scriptcase – Parte II

Olá pessoal, tudo bem ? Hoje vamos dar continuidade ao post anterior "Criando um Site Gerenciáv...

Deep Data Perspective – Modelos e Processos de Negócios

Ouça o podcast e aprenda a reconhecer os processos e modelos de negócios da Deep Data Perspective ...

Criando um Site Gerenciável com Habemus e Scriptcase – Parte I

Criando um site gerenciável com Habemus e Scriptcase. Hoje iremos tirar o site do Habemus colocar n...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.