Animações em CSS3

Nesse tutorial veremos uma série de exemplos de animações que podemos criar com CSS3. Introduzirei os efeitos para que você possa trabalha-los com criatividade em seus projetos!

Crie uma lista com algumas imagens – de três a cinco, para testarmos, como no exemplo abaixo.


Para o efeito poraloid acima utilizei somente CSS – veja o código abaixo:

[code language=”css”] body {
background: url(images/bamboo-texture.jpg) repeat;
}

li{
list-style:none;
}

ul.gallery li a {
float: left;
margin: 50px;
margin-top: 100px;
}

img{
opacity: 0.85;
width:200px;
height:150px;
position: relative;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}

img:hover{
opacity: 1;
}

[/code] Para body, temos:
[code language=”html”] [/code]

A primeira animação que trabalharemos é o scale. Esse atributo tem a função de alterar o tamanho da imagem em relação ao seu tamanho inicial. Para um valor de scale: 1.8, por exemplo, a imagem ficaria com 80% a mais do seu tamanho atual (tanto na altura, quanto na largura). Da mesma maneira, um scale:0.8 deixaria a imagem com 80% do seu tamanho original.

Adicionei a classe abaixo e observe esse efeito.

[code language=”css”] img:hover{
opacity: 1;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
[/code]

Caso você queira que somente o eixo X (ou seja, a largura) do objeto seja alterado, trabalhe com scaleX(VALOR). De maneira análoga, para o eixo Y (altura), utilize scaleY(VALOR). O atributo scale também admite a forma scale(X,Y) – quando passamos somente um valor, como fizemos acima, assume-se X=Y.

Opcionalmente podemos trabalhar também com o atributo transform-origin que direciona para “onde o elemento irá crescer”. Como valores você pode trabalhar com top, bottom, center(padrão), que podem ser combinados. Adicione o trecho abaixo em img:hover e faça o teste.

[code language=”css”] -webkit-transform-origin: bottom left ;
-moz-transform-origin:bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
[/code]

Para dar mais realidade ao efeito, adicionaremos uma sombra na imagem para que ela tenha o efeito de “sair da tela” quando o usuário passar o mous sobre ela. Utilizaremos o box-shadow [LATERAL ACIMA/ABAIXO BLUR COR]lembra-se dele?

[code language=”css”] -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
[/code]

Para um efeito mais suave e profissinal, adicionaremos também uma transition para a transform – se ainda não trabalhou com transitions, não deixe de ler esse post. Adicione o trecho abaixo dentro de img:

[code language=”css”] -webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
[/code]

Outro animação bacana que podemos trabalhar com, é o efeito rotate – que é um valor que também pode ser inserido em transform. Esse faz com que a imagem faça uma rotação ao redor de seu eixo inicial e esse valor é passado em graus, tendo deg – ou degress, em inglês, como unidade de medida. Para ver em funcionamento, altere os transform em img:hover:

[code language=”css”] -webkit-transform: scale(1.3) rotate(-10deg);
-moz-transform: scale(1.3) rotate(-10deg);
-o-transform: scale(1.3) rotate(-10deg);
transform: scale(1.3) rotate(-10deg);
[/code]

A transformação skew(X,Y) – ou inclinação, trabalha com as coordenadas X e Y e distorce um elemento – realmente trabalha como sua “inclinação.” Se fôssemos para distorcer as fotos em nossa galeria em hover, por exemplo, usaríamos o seguinte CSS (inclinação negativa cinco graus da coordenada x, e 30 graus na coordenada y)

[code language=”css”] -webkit-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg);
-moz-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg);
-o-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg);
transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg);
[/code]

Por fim, o atributo translate(X,Y) permite que você mova um elemento na tela, em relação a sua posição inicial. Supondo que eu queria que uma imagem de minha galeria desloque-se 25px no eixo X e 50px no eixo 50, quando em hover:

[code language=”css”] -webkit-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg) translate(25px, 50px);
-moz-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg) translate(25px, 50px);
-o-transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg) translate(25px, 50px);
transform: scale(1.3) rotate(-10deg) skew(-5deg, 30deg) translate(25px, 50px);
[/code]

Para mover a imagem para a esquerda e/ou para o topo, utiliza-se valores negativos. É importante ressaltar que translate não influencia na posição dos outros elementos em sua página, simplismente diga ao objeto sua nova posição aonde ele deve estar, que ele irá, sem “perturbar” os outros objetos da página – o que vai te evitar um dor de cabeça daquelas! 😀

Na galeria que criamos acima utilizamos todos os possíveis atributos de transform, mas ao usa-los no dia-a-dia, tenha bom senso! Colocar efeitos demais em algo pode trazer o efeito contrário ao que você esperava!

Para baixar os arquivos desse tutorial, clique aqui.





// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

2 Comentários

  • Responder setembro 7, 2011

    Animação em CSS3

    […] admin_pr No Comments Tweet Em alguns tutoriais anteriores trabalhamos com animações em css3 usando os atributos transform e transition. Se você acha que o já produziu é legal, espere até o fim desse […]

  • Responder novembro 17, 2011

    Sundance

    Hey, that’s the graeetst! So with ll this brain power AWHFY?

// Siga as boas práticas: Comente!