
css アニメーションで画像をプルプルさせてみる
2018-04-03 | web
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)
}
}
こちらのページで実装しているよ。