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: