タイ研修いってきました
2021.02.17

【コピペOK!】CSSだけで動くアニメーション5選

  • このエントリーをはてなブックマークに追加

こんにちは!なかしです。

コーディングを勉強しているみなさん、
HTMLやcssに慣れてきたら、動く要素を作りたいと思ったことはありませんか?

動きといえばjavascriptですが、ちょっと難しいかも・・・
と抵抗を感じる方も多いと思います。

でもご安心を!cssだけでも動く要素を作ることができるんです!
今回は、cssだけの簡単なアニメーションを5つご紹介したいと思います。

ぽよんと弾む

See the Pen
dyONJzm
by nakashima (@nakashima1201)
on CodePen.


こちらのぽよんと弾むアニメーションでは、
要素の拡大・縮小を指定する『scale』を使用しています。
()内は縦横比率を表し、1つ目で横方向、2つ目で縦方向の動きを指定できます。
%を使用して動きの経過も指定すれば、伸縮具合を調整することも可能です。

もちもち動く

See the Pen
rNWjYYX
by nakashima (@nakashima1201)
on CodePen.


こちらは、繰り返しもちもち動くアニメーションです。
注目したいのが、上のぽよんと弾むアニメーションにもあった『infinite』。
ページ読み込み時だけでなく、ページが表示されている間は
繰り返しコンテンツを動かすことができるようになります。

ふわふわ浮遊する

See the Pen
yLVVXYw
by nakashima (@nakashima1201)
on CodePen.


次は、『translateY』で縦方向の動きを指定し、浮遊感を表現したアニメーションです。
これは簡単で取り入れやすいですね。
お察しの通り、『translateX』の場合は横方向の動きを指定できます。

ピコピコ動く

See the Pen
bGBgYwL
by nakashima (@nakashima1201)
on CodePen.


次は、要素を回転させる『rotate』を使ったアニメーション。
()内は回転する角度を表しており、正の数なら要素の中心を基準にして時計回りに回転、
負の数なら半時計回りに回転させます。

キラっと光る

See the Pen
PobWOga
by nakashima (@nakashima1201)
on CodePen.


最後は黄色い四角の上に傾いた白い四角形を乗っけて伸縮させ、
光沢を表現したアニメーションです。
動きの性質『ease-in-out(開始と終了時は緩やかな動き)』を追加で設定しているのですが、
様々な種類があるので、下記を参考にしてみてください。

その他の動きはこちらから

最後に

いかがでしたでしょうか?
cssだけでも「ぽよん」や「ふわふわ」などの使用頻度の多いアニメーションが簡単に作れることがお伝えできたかと思います。
ぜひコピペして使ってみてください!

第二回の記事はコチラ↓

【コピペOK!】第二回 CSSだけで動くアニメーション5選

この記事を書いた人

なかしなかし

レジットのコーダー。趣味は旅行と料理と商店街散策です。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金