Home CSS CSS3 transições, transformações e animações
CSS3 transições, transformações e animações
CSS Luiz Augusto Vieira 18/01/2018
Exemplos na prática de efeitos no CSS3.
Você vai descobrir como fazer transições, transformações e animações com CSS3. Isso vai tornar seus sites muito mais divertidos, fáceis, rápidos, eficientes e vai aumentar a experiência dos usuários. Você pode criar coisas legais sem o uso de animações com javascript ou flash, usando apenas o CSS3.
VOCÊ SABE O QUE É PREFIXOS DE FORNECEDORES?
Bom, prefixos do fornecedores são: ( -webkit-, -moz-, -o-, -ms- ), viiixi, mas que diabos é isso? Calma, veremos exemplo real ao longo deste post.
Não precisa usar todos eles em todos os casos. Por exemplo, o Firefox pode manipular transformações desde o 10/2012 sem -moz-, mas se você quiser o suporte ao IE9, você deve incluir -ms- para transformações.
Usa os prefixos de fornecedores, onde faz sentido para uso atual e futuro. Se você está preocupado com a compatibilidade com versões anteriores, consulte a lista abaixo e adicione o que você precisa.
| TYPE | INCLUDE | BACKW.COMPATIBILITY | FOR VERSION | RELEASE DATE |
|---|---|---|---|---|
| transform (2d) | -webkit- | -moz- -o- -ms- | FF <= 15 Opera <= 12 IE 9 | 10/2012 10/2012 03/2011 |
| transform (3d) | -webkit- | -moz- | FF <= 15 | 10/2012 |
| transition | -webkit- (for Android/Blackberry) | -moz- -o- | FF <= 15 Opera <= 12 | 10/2012 10/2012 |
| animation | -webkit- | -moz- | FF <= 15 | 10/2012 |
| backface-visibility | -webkit- | -moz- | FF <= 15 | 10/2012 |
| @keyframes | -webkit- | -o- | Opera <= 12 | 10/2012 |
| box-shadow | - | -webkit- (for various browsers) | various | various |
Como você pode ver, não há mais necessidade para usar o vendedor-prefixo-hype. Isso se da porque a maioria dos navegadores modernos estão se atualizando automaticamente para uma versão mais recente. De modo geral, basta adicionar o -webkit- para que seu efeito funcione. Mas, faça os testes com as versões dos nevagadores, ok.
Vamos brincar um pouco com CSS3?
AUMENTAR O TAMANHO DA IMAGEM
Vamos criar um efeito que ao passar o mouse sobre a imagem, aumente a tamanho da mesma.
Para isso, crie um arquivo CSS com nome de style.css e salve este em uma pasta em seu computador.
Depois copie e cole o código abaixo e salve novamente.
img{
max-width: 100%;
}
.bloco {
width: 250px;
margin: 15px;
}
.bloco img{
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.bloco img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Vou explicar o código acima pra quem ainda não conhece essas propriedades e prefixos.
O ( img{ max-width: 100%; } ) é usado para que a imagem se encaixe dentro do bloco que tem a largura de 400px.
O ( transition: all 0.7s ease; ) é usado para dar um efeito suave ao nosso efeito ao passar e tirar o mouse de cima da imagem.
A transition é uma propriedade abreviada utilizada para representar até quatro propriedades longas de transição relacionadas:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
Essas propriedades de transição permitem que os elementos alterem valores durante uma duração especificada, animando as alterações de propriedade, em vez de terem ocorrido imediatamente.
Sabendo disso, ao passar o mouse sobre a imagem, invocamos o Hover que tem a propriedade transform:scale(1.2).
E usamos o -webkit- para garantir nosso efeito em outros navegadores.
Nosso próximo passo é criar nosso arquivo HTML, então vamos lá.
Crie um arquivo HTML com nome de index.html copie e cole o código abaixo e salve este na mesma pasta onde você salvou seu arquivo CSS style.css.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo CSS3</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="bloco">
<img src="imagem.jpg" alt="Image size" title="Image size" />
</div>
</body>
</html>
Veja o resultado final:
EFEITO ZOOM IN
No nosso exemplo acima, perceba que ao passar o mouse sobre a imagem ela aumenta seu tamanho estourando nossa <div class="bloco"></div>.
Então vamos resolver esse “problema”, mas, nesse caso não seria um problema, pois existem casos que sua intenção será fazer com que a imagem aumente seu tamanho estourando nosso bloco.
Bom, então como fazer a imagem aumentar dentro do nosso bloco, sem estourar?
Uma simples linha código com a propriedade “OVERFLOW: HIDDEN” vai resolver nosso problema.
Utilizando o mesmo código do nosso exemplo anterior, vamos incluir essa propriedade no nosso bloco no CSS.
img{
max-width: 100%;
}
.bloco {
width: 250px;
height: 150px;
margin: 15px;
overflow: hidden;
}
.bloco img{
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.bloco img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Perceba que adicionamos duas propriedade ao nosso bloco: “HEIGHT: 150px” e “OVERFLOW: HIDDEN”, o “height” para fixar uma altura ao nosso bloco, o “overflow” vai fazer com que nossa imagem não estoure nosso bloco principal ao aumentar seu tamanho.
Veja o resultado abaixo:
ZOOM OUT
Legal nossos dois exemplos acima, né?
Vamos agora fazer o contrário, ao invés da nossa imagem aumentar, vamos diminuir dentro do nosso bloco.
Com mesmo código CSS do nosso exemplo anterior, vamos alterar algumas coisas conforme nossas necessidades.
img{
max-width: 100%;
}
.bloco {
width: 250px;
height: 150px;
margin: 15px;
overflow: hidden;
}
.bloco img{
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.bloco img:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
Perceba que dentro do nosso bloco “.bloco img”, adicionamos a propriedade “TRANSFORM: SCALE(1.3)”, isso vai fazer com que nossa imagem já se inicie com este zoom, ok.
Ao passar o mouse sobre a imagem, modificamos o “TRANSFORM: SCALE(1)”, ou seja, estamos diminuindo duas escalas diminuindo o zoom.
Veja o resultado abaixo:
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para CSS3 transições, transformações e animações