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…

Tendências de desenvolvimento web para 2017

Você verá neste post tendências para 2017 em Web Design, no meio Digital e em Desenvolvimento. Me...

Importando a biblioteca Bootstrap para dentro do Scriptcase

Neste artigo, mostraremos um exemplo prático de como tornar a biblioteca Bootstrap disponível no...

Usando as macros sc_redir e sc_apl_conf

Macro no Scriptcase é algo parecido a criação de funções na linguagem de programação PHP, na...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.