web Design | TRANSIÇÕES E ANIMAÇÕES

by primeiro design

000000003

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos e medidas de distância e posição.

O básico: propriedade transition
A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até dispense explicações mais elaboradas. Vamos começar com o código abaixo:

a {
color: white;
background: gray;
}
No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz exatamente isso:

a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.
Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as características do link com uma pequena transição de meio segundo. O código seria como se segue abaixo:

a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições básicas como cor, tamanho, posição etc.
Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:

a {
border:1px solid orange;
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo, por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.
Abaixo veja o código. copie em um arquivo HTML e veja o efeito:

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html>

Originally posted 2014-12-11 17:30:28. Republished by Blog Post Promoter