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

もくじ
・hoverしたりロードしたときに、カメラがぷるんと動く
・カメラをゆらゆらと揺らしてみた

hoverしたりロードしたときに、カメラがぷるんと動くよ

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

html

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

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

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

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

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

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

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

追記：カメラをゆらゆらと揺らしてみた

同じ要領で、今度はカメラをゆらゆらと揺らしてみました。

html

<div class="content">
 <div class="camera-illust__wrapper">
  <div class="camera-illust"><img src="画像のパス"></div>
 </div>
</div>

css

.content {
  position: relative;
}
.camera-illust__wrapper {
  position: absolute;
  top: -10px;
  right: 25%;
}
.camera-illust {
  width:70px;
  z-index:1;
  position:absolute;
  -webkit-animation:camera 3s ease-in-out infinite alternate;
  animation:camera 3s ease-in-out infinite alternate;
  -webkit-transform-origin:center top;
  transform-origin:center top
}
@-webkit-keyframes camera {
  0% {
   -webkit-transform:rotate(20deg);
   transform:rotate(20deg)
  }
  100% {
   -webkit-transform:rotate(-20deg);
   transform:rotate(-20deg)
  }
 }
 @keyframes camera {
  0% {
   -webkit-transform:rotate(20deg);
   transform:rotate(20deg)
  }
  100% {
   -webkit-transform:rotate(-20deg);
   transform:rotate(-20deg)
  }
 }

こちらのページで実装しているよ。

次はどこ行く？行きたいところリスト