Não funciona no Internet Explorer!
transition (transição) faz com que as mudanças de posição, cores, cantos e tamanhos de um elemento sejam gradativas. Quanto maior a duração, mais suave será o fade.Para ver o recurso em ação, coloque o cursor do mouse dentro do retângulo abaixo. Mantenha o ponteiro sobre o retângulo durante toda a transição para ver a mudança até o final.
— Apenas um teste legal!
► Exemplo simples
O modelo que mostrei acima é bastante complexo. Nele eu modifico quase tudo a que tenho direito: cores, fundo, bordas, cantos, tamanho de fonte, margens. Para que você compreenda melhor a propriedade, primeiro vou apresentar um código mais enxuto:
-o-transition:all 5s; -webkit-transition:all 5s;} div#facil:hover {background:greenyellow; width:450px;} </style>
<div id="facil">Este exemplo é mais fácil de entender.</div>
Resultado:
► Exemplo complexo
No primeiro exemplo deste post foi utilizado o seguinte código:
-webkit-transition:all 5s linear; -o-transition:all 5s linear;} div#muda:hover { margin:40px; margin-left:auto; margin-right:auto; color:white; font-size:50px; width:300px; height:300px; background-color:salmon; box-shadow: 10px 10px 10px #F08080; border:1px solid #F08080;} </style> </head> <body> <div id='muda'><span style='color:salmon;'>— O que é isto?</span><br/>— Apenas um teste legal!</div> </body>
— Apenas um teste legal!
► Aplicação imediata
Esta propriedade já pode ser inaugurada imediatamente em seu blog. Basta adicionar o seguinte código à folha de estilos.
CSS padrão:
* {transition:all 2s linear; -moz-transition:all 2s linear;
-webkit-transition:all 2s linear; -o-transition:all 2s linear;}
</style>
CSS do Blogger:
-webkit-transition:all 2s linear; -o-transition:all 2s linear;}
]]></b:skin>
No Blogger você vai conseguir notar mudança quando passar o mouse sobre os links e os botões de compartilhamento do rodapé do post. Usando Chrome e Opera também será percebida uma interessante diferença no carregamento do widget do Facebook, caso você o tenha.
Para experimentar as mudanças antes de instalar o código em seu blog, abra o HTMHelen no Chrome e ao mesmo tempo no Internet Explorer.
► Legenda
transition- agrupa todas as propriedades de transição.transition-property- aqui você define quais propriedades terão uma transição suave. Exemplos:width,height,color.
Quando você escolhe quais atributos terão fade, os outros terão mudança brusca, o que pode tornar o efeito bastante estranho. Recomendo sempre usar all porque assim tudo muda no mesmo ritmo.transition-duration- escolha quanto tempo vai durar a transição. As unidades de medida são s (segundos) e ms (milissegundos). No exemplo acima foi definida a duração de 5s (cinco segundos).transition-delay- OPCIONAL - você pode determinar um tempo para a transição começar. Para uso corriqueiro não recomendo definir delay porque tudo que obriga as pessoas a esperarem (qualquer milissegundo que seja) tende a ser muito irritante. Essa propriedade tem maior utilidade para quem cria jogos e outros aplicativos com HTML e CSS. As unidades também são s e ms.transition-timing-function- OPCIONAL - com esta propriedade você escolhe a variação da velocidade do fade ao longo do movimento:linear→ velocidade constante. Equivale acubic-bezier(0,0,1,1).ease[padrão] → início lento, fica rápido, fim lento. Equivale acubic-bezier(0.25,0.1,0.25,1).ease-in→ início lento. Equivale acubic-bezier(0.42,0,1,1).ease-out→ fim lento. Equivale acubic-bezier(0,0,0.58,1).ease-in-out→ início lento e fim lento. Equivale acubic-bezier(0.42,0,0.58,1).cubic-bezier(n,n,n,n)→ defina a variação de velocidade manualmente. Exemplo: transition-timing-function:cubic-bezier(0.5,0,0.5,1).
A propriedade transition ainda está em fase beta nos navegadores, por isso para conseguir resultado ainda é necessário utilizar os seguintes prefixos:
-webkit-para funcionar no Chrome, no Safari e nos navegadores derivados dele.-moz-para funcionar no Firefox e nos navegadores derivados dele.-o-para funcionar no Opera e nos navegadores derivados dele.
Para dominar todas as possibilidades desta propriedade, recomendo que faça seus testes no bloco de notas, como já expliquei no post Como começar a estudar HTML e CSS.
Não funciona no Internet Explorer!
Fonte: w3schools.com
Até mais!
Estava mesmo à procura disto, obrigado!
ResponderExcluirDe nada. ;)
ExcluirBem legal essas transições em CSS, coloquei alguns efeitos em meu blog há algumas semanas atrás.
ResponderExcluirUma grande pena de todos os navegadores não suportarem totalmente isso(Sobretudo o IE).
IEca é IEca.
ExcluirPuts Helen, adoro seu blog por essa e outras coisas legais.
ResponderExcluirVolte sempre!
ExcluirBom mesmo.
ResponderExcluirOlá Helen poderia me ajudar a fazer um fundo para meu blog. fundo que digo e igual esse do sei site verde com umas bolas branca ....
ResponderExcluirHelen poderia passar os códigos do transition-property pra primeiro aumentar a altura depois a largura?
ResponderExcluire parabéns pelo blog.
Não acredito que isso seja possível apenas com HTML e CSS. Obrigada e volte sempre!
ExcluirSomente agora começo à entrar no mundo da programação web (tenho 29 anos)e venho garimpando tudo que acho interessante.
ResponderExcluirE com certeza já virei seu fã só vendo este post.
Muito obrigado por compartilhar seu conhecimento com o público.
Parabéns!
HTML e CSS não são linguagens de programação, mas entendo o que quer dizer. Raimison, no final do post Como começar a estudar HTML e CSS há dicas de sites muito bons para você estudar. Sucesso!
ExcluirRealmente não são linguagens de programação, mas são bem parecidas (risos).
ExcluirObrigado pela dica.
De nada. :)
ResponderExcluirMuito bom, foi o melhor tuto que encontrei para esse efeito. Obrigado.
ResponderExcluirLL
De nada. Manda um abraço para a Sandy.
Excluir(Sei que você já deve estar de saco cheio dessa piada, mas não resisti.)