Já foi-se o tempo que parar criar efeitos em Elementos CSS geralmente era preciso da interação de um arquivo JavaScript/JQuery. com o avanço dos tempos tudo ficou mais simplificado e fácil com a vinda do CSS3. Hoje iremos aprender a adicionar um efeito de Transição em todos elementos Hover do seu Layout.

Primeiramente, em sua folha de estilo adicione o seguinte código Css:

Código:

* {
 margin:0;
 padding:0;
 transition: background .5s ease-in-out;
 -moz-transition: background .5s ease-in-out;
     -o-transition: background .5s ease-in-out;
 -webkit-transition: background .5s ease-in-out;
}

Logo depois, salve o seu arquivo e verá um resultado chamativo e interativo, que irá enriquecer o seu Layout. Lembre-se que o tempo de suavidade roda em torno dos segundos adicionados, quanto maior o número de segundos mais rápida será a suavidade.

Nota: Os efeitos de Transição possuem o Suporte nos navegadores Chrome, Mozilla Firefox, Internet Explore & Opera.

Créditos pelo Tutorial: Je4n

Olá,

Me parece interessante o código, parabéns pelo trabalho.

Até mais.

obrigado por compartilhar.
adorei, ainda vo usar.
mt interresante

Adoro esse efeito, não sei se já notou, mais eu sempre utilizo ele em meus sites.

Muito bom eu sem dúvidas vou usar

Procurei isso hj uahe

Vou usar em umas coisas aqui

Obs, o " transition: " deve ser pro IE, acho eu.

Essa já sei faz tempo... mas é simples e fácil. já utilizei muitas vezes.

ϟFish3r escreveu:Vou usar em umas coisas aqui

Obs, o " transition: " deve ser pro IE, acho eu.

Sim, acho que sim também. Irei adicionar, havia esquecido.