CSSアニメーションで背景に猫を流してみた笑
公開:2019.10.10
更新:2020.05.17
こんにちは!台風を前に色々と悟っておこうと決めたらいどらです。
告白。このサイト、実はこの前プライバシーポリシーと、お問い合わせフォームを設置したので、フッターメニューを追加したんです。
…..すいません!そんなことどうでもいいとか言わないで……!
問題は、その背景がめちゃ質素ってことなんですよ。いやまあ真面目ページに繋がるメニューだから質素の方が良いのかもしれないけどさ…..。
それでも!おもしろくしたい!!
という訳で、フッターメニューの背景に猫を流すアニメーションを作っていきます(誰得)
目次
実装方法
実装にはCSSを使います。@keyframesってやつです。アニメーション進捗を区切ってスタイリングを入力するだけでアニメーション的な事が出来ます。
例としてこれ。
HTML
<div class="backanimation">
<p>ここの背景が変わります~</p>
</div>
CSS
.backanimation {
background-color: red;
animation-name: redblue;
animation-duration: 10s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
@keyframes redblue {
0% { background-color:red;}
100% { background-color:blue;}
}
ここの背景が変わります~
猫を動かしてみる
さあ~例が終わったので本題入りますよ~。
まずは画像を用意しなきゃですが、今回はこの前撮ったこれにします。

うん!木猫!
HTML
<div class="p_o_area">
<div class="ryuudouneko">
<img class="nekonekoimg" src="https://kiborineko.com/wp-content/uploads/2019/10/woodcatcut.png">
<!--ここにフッターメニュー-->
</div>
CSS
.p_o_area {
position: relative;
}
.ryuudouneko {
position: absolute;
animation-name: nekonekofly;
animation-duration: 5s;
animation-delay: 5s;
transform: rotate(0deg);
left: 1000px;
top: 10px;
animation-iteration-count: infinite;
}
img.nekonekoimg {
width: 70px;
}
@keyframes nekonekofly {
0% { transform: rotateZ(0deg);left: 1000px;top: 0;}
100% { transform: rotateZ(3000deg);left: -200px;top: 50px; }
}
流れる猫にありがたみを感じるため、5秒かけて右から左に回転しながら移動することにしました。
さてどうなった………?
流れてるwwwww猫がwwwwww流れてるwwwwwww(;’∀’)
駄目だwww笑いが抑えきれないwwwwww
ふう……。
位置間違えてたのか、厳密な右から左では無くなってしまったので実際に使う時はleftをいじった方が良いですね。
まとめ
さて、今回はこれにて終了です。
なんともCSSアニメーションのインパクトを体感した回になりました…….笑。サイトが重くならないほどに程ほどに追加していきたいですね!笑
ちなみにもう本実装してあるので下にスクロールすれば流れる猫が見れると思いますw(残念ながらスマホだと無理です…..。)
それでは皆さんも、楽しきねこねこアニメーションライフを~