ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ

TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s

[d_log8]

ここまで動かせる！楽しいcss アニメーションのサンプル集 小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015

[kzstmn]

css アニメーションのサンプル集

[haryu0320]

“アニメーションを取り入れるサイトは増えていくでしょう。”

[kena0905]

LOADINGアニメーションやってみる

[aoiasaba]

スターウォーズやりたいｗ

[simazoe]

楽しい♪

[s99e209]

CSSアニメーションを使って、面白い動きができるコードまとめ。