Tutorial: Efeito Fade-In no blogspot II


Olá pessoas, tudo bom? Comigo está tudo bem! Peço desculpas por não atualizar o blog conforme o cronograma, estou fazendo entrevista de emprego e sábado tenho o vestibular, portanto, essa semana está meio corrida para mim.

Este efeito é uma transição de cores pondendo ser suave ou não, dependendo do tempo de duração. Eu já tinha postado antes em um blog que eu contribuia o Efeito Fade-In [link], que você editava pelas Gadgets. Esse efeito você editará pelo próprio CSS usando keyframes.


Todos os códigos abaixo serão colocados no seu CSS.

O código abaixo serve para que seu efeito se repita em todos os navegadores:

@-webkit-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@-moz-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@-o-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}


-webkit-animation: Google Chrome e Safari
-moz-animation: Mozilla Firefox
-o-animation: Ópera
-ms-animation: Internet Explorer


O código a seguir marcará o tempo que o efeito fade-in terá:

.fadeineffect{-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn: 5s;}


Agora, para mostrar o efeito no seu blog, marque a opção "Expandir modelos de Widgets" e depois procure por <body e cole o seguinte código em baixo do código que aparecer:



E depois procure por </body e cole o </div> antes do código pesquisado. E prontinho! Caso tenham dúvidas, é só deixar no comentário.