【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法ｗ

CSSのポテンシャルは底知れない…

本日、CSSのアニメーションに関するテクニックを漁っていましたら、とんでもテクニックを発見しましたので、その備忘録的な記事です。

マジで「どこで使う所あるねん😂 」ってテクニックですので、あんまり参考にしない方がいいですｗｗｗ

それでは早速、”インパクト抜群”のCSSアニメーションを使ったビヨンビヨン画像を御覧ください！

縦バージョン

横バージョン

画像は全てぴよたその素材です。僕のプロフィール画像もここのやつですね！ぴよたそについては以前にも記事にしたことがあるので、興味がある人はご覧ください。 

スポンサーリンク

まるでgif画像

やばくないですか？

完全に伸び縮みしてますよね？

まるでgif画像かと思いますよね？

CSSだけなんです！

CSSだけなので、gif画像みたいに重たくなることもなく、解像度も鮮明、その上アニメーションもウルトラ滑らか。やべー。

作り方気になりますよね？

え、ならない？

いやいやいや、気になって仕方ないでしょ。

どこで使うねんとかはさておき！とりあえずこーゆーアニメーションがどーゆーCSSで書かれているのか？そこが気になる人もいるはず！

ってことで、半ば無理やり作り方へいきましょう！ｗ

まずはCSSを準備

流れとしてはとても簡単。事前に用意していたCSSのclassやらidをビヨンビヨンさせたい画像にHTML編集から付与するだけ。CSSもコピペでOK。

CSS

はてなブログの場合の貼り付け場所

管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」

コードはこちら

コードを開く

	/*********************************
	画像をビヨンビヨン
	*********************************/
	#biyon-tate{
	margin-top:200px;
	-webkit-animation-name:biyon-tate;
	-webkit-animation-property:-webkit-transform;
	-webkit-animation-duration:500ms;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	-webkit-transform-origin:center bottom;
	}
	@-webkit-keyframes biyon-tate{
	0%{
	}
	25%{
	-webkit-transform:scale(.8,1.6);
	}
	100%{
	-webkit-transform:scaleX(1.2,.5);
	}
	}
	#biyon-yoko{
	margin-top:;
	-webkit-animation-name:biyon-yoko;
	-webkit-animation-property:-webkit-transform;
	-webkit-animation-duration:500ms;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	-webkit-transform-origin:center bottom;
	}
	@-webkit-keyframes biyon-yoko{
	0%{
	}
	25%{
	-webkit-transform:scale(1.6,.8);
	}
	100%{
	-webkit-transform:scaleX(1.2,.5);
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

これでCSSの事前準備は完了です。とくに調整するようなところもないかな？

ポイントは「keyframes」というやつです。

これは、地味に僕のブログでも使っているやつで、ページ更新時に色々上からとか横からとかスーッてスライドしてきたりするやつ。これを「keyframes」で制御してます。

今回はとりあえずネタ記事なので、keyframesの説明とかは割愛します！ｗ

HTMLでの実装方法

上記のCSSが事前に準備できれば、後はHTMLにて#biyon-tateとか#biyon-yokoとかを付与してあげるだけでOKです。

たとえば記事内の画像で使う場合、

<img id="biyon-tate" src="画像URL" alt=""  />

このように、挿入した画像のimgタグ内の先頭でも末尾でもどこでもいいのですが、id="biyon-tate"というように付与します。

これだけでOK！

もちろん、編集画面では変化ありませんが、プレビューなりすると完全にビヨンビヨンしています。

まとめ

これ、なんか応用方法ないかな？ｗ

たとえばプロフィールの画像に適用するのもアリ、SNSアイコンとか、フォローボタン、あるいはFont Awesomeのアイコンに適用するのもアリ、なんならヘッダー画像に使うのはどうだろう？！

誰か、このテクニックを応用してブログのアクセントにできた方、ご報告くださいませ😂