byALF | 
quinta-feira, novembro 09, 2017
Transition - propriedade CSS3
Neste artigo vamos falar de uma propriedade do CSS3 bem legal. Trata-se do efeito transition, uma nova propriedade de estilo CSS que permite que você altere suavemente os valores de um elemento para outro, durante um determinado tempo.
CSS3 é a mais nova versão para as folhas de estilo Cascading Style Sheets (ou simplesmente CSS), onde podemos agora definir novos estilos para páginas web como: efeitos de transição, cantos arredondados, sombras, animações, desenhos, degrade, entre outros. Estes novos efeitos criados pelo CSS facilitaram a vida dos programadores, pois agora podemos fazer coisas de forma muito simples que precisariam de longos códigos escritos em JavaScript ou em outras linguagens.
Para compreender melhor a propriedade transition, veja o exemplo abaixo (passe o mouse sobre a imagem):
Observe que quando você passa o mouse sobre a imagem ocorre uma transição na largura (width) e na cor do fundo (background-color) de forma bem suave. Isto pode ser feito de uma maneira muito simples com o CSS3, utilizando a propriedade transition.
Usando a propriedade “transition”
Basicamente o código padrão desta propriedade é:
transition: propriedade tempo tipo;
Em propriedade definimos qual elemento queremos fazer a transição, seja width, height, background-color, etc (qualquer propriedade CSS). Para definir todas as propriedades podemos usar o atributo all.
Em tempo definimos a duração total para a transição, por exemplo: 1s, 2s, 10s. Quanto maior o tempo de duração, mais lento fica o efeito de transição.
Em tipo definimos como será distribuída a duração da transição: Veja abaixo os tipos de tipo para transição: liear, ease, ease-in, ease-out, ease-in-out. (Passe o mouse sobre as imagens para observar cada tipo de transição).
Note: Estes exemplos não trabalham no Internet Explorer.
Usando a propriedade “transition” na prática
No nosso exemplo inicial, usamos o seguinte código:
transition: all 2s linear;
Observe que utilizamos:
- Propriedade: all (serve para todas as propriedades utilizadas)
- Tempo de duração: 2s (2 segundos)
- Tipo: linear (transição é feita com velocidade linear).
Para um melhor entendimento, veja abaixo o código completo do exemplo:
<style>
.efeito {
margin: auto;
margin-top: 10px;
width: 300px;
height: 300px;
background-color: green;
transition: all 2s linear;
}
.efeito:hover {
width: 550px;
background-color: orange;
}
</style>
<div class="efeito"></div>
Faça o teste colando o código acima no nosso editor HTML: Squids Editor
Para utilizar CSS nas páginas do site, leia nossos artigos:
Para saber mais sobre a propriedade transition, acesse o link: W3School
0 comentários:
Postar um comentário