Visual Dicas

sexta-feira, 10 de novembro de 2017

Visual Dicas

Efeitos CSS3 - Transições entre propriedades

Posted: 09 Nov 2017 12:13 PM PST

Resultado de imagem para css3

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.

linear

ease

ease-in

ease-out

ease-in-out

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>

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:

Simulador CSS e HTML – Ótimo para iniciantes…