Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

css アニメーションで画像をプルプルさせてみる

css アニメーションで画像をプルプルさせてみる

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 加賀さんの記事です。勉強になりました!ありがとうございました。

コピペで使える! CSS Animationだけで実現するキャラクターアニメーション

みたらしさんぷるん demo

みたらしさんぷるん github

 

share on

TIPS&NOTE TOPへ