• Categoria do post:Programação para Web
  • Tempo de leitura:3 minutos de leitura
Ads

Se você ainda não conhece a biblioteca CSS Animate.CSS, veja a aula aqui – Criando animações em seu site com animate.css

Esta biblioteca demonstra nos seus exemplos como criar efeitos durante o carregamento de um elemento, no entanto, podemos também criar efeitos após o elemento já estar carregado na página, um exemplo é um efeito hover usando recursos do próprio CSS ao invés de jQuery.

Considere o seguinte código exemplo;

<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Minha página animada</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 <style>
	borda {
    border-style: solid;
    border-color: #f2f2f2;
	padding: 25px;
}
 </style>
</head>
<body> 
	<img src="https://aulas-profanderson.azurewebsites.net/tpi/criando-animacoes-em-seu-site-com-animate-css/img/like.svg" width="150px" class="animated pulse">
	<p>Passe o mouse para pulsar.</p>
</body>
</html>

Ao executar este código percebemos que a imagem do coração pulsa apenas durante o carregamento da página e depois não pulsa mais. Considerando que queremos que o coração volte a pulsar quando passarmos o mouse, podemos resolver desta forma;

<style>
	img {
		border-style: solid;
		border-color: #f2f2f2;
	}
	
	.animacao
	{
			padding: 25px;
		-webkit-animation:zoomIn 1s;
		animation:zoomIn 1s;
	}
		
	.animacao:hover 
	{
		-webkit-animation:pulse 1s;
		animation:pulse 1s
	}
</style>

Observe que, a animação inicial durante o carregamento do elemento é a zoomIn, e a animação do hover é a pulse. Curiosamente não consegui fazer com que a animação de entrada fosse a mesma animação do hover. Então, enquanto não consigo resolver esta questão, recomendo que faça como o exemplo. usando animações diferentes para entrada e hover.

Como usar o código acima

Para usar o código acima tem um truque, no atributo class da imagem temos que remover a classe que define a animação e substituir pela classe animacao que criamos acima.

<img src="https://aulas-profanderson.azurewebsites.net/tpi/criando-animacoes-em-seu-site-com-animate-css/img/like.svg" width="150px" class="animated animacao">

O resultado será este: