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

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

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

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

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

ぽよんと弾む

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

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

もちもち動く

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だけで動くアニメーション５選