css アニメーションを使って、画像を動かしてみました。

画像はたった一枚だけです。
ページの読み込み時とhoverしたときにロゴのイラストがぷるんと動きます。

html

動かしたい要素にid（camera）とclass（fluffy）を追加します。

<a href="リンクURL"><img src="画像のパス" id="camera" class="fluffy"></a>

css

class（fluffy）のアニメーションです。

.fluffy {
	-webkit-animation: fluffy 0.8s linear 0s 1;
	animation: fluffy 0.8s linear 0s 1;
}
@-webkit-keyframes fluffy {
	0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes fluffy {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

js

読み込んだとき、hoverしたときに、id（camera）にclass（fluffy）が追加・削除されるようにします。

window.onload = function() {
 $('#camera').hover(
 function(){$(this).addClass('fluffy');},
 function(){$(this).removeClass('fluffy');}
 );
};

参考にさせていただいたサイト

ICS MEDIA 加賀さんの記事です。勉強になりました！ありがとうございました。