【デモ付&コピペOK】LPでよく使われている(手軽に使える)アニメーション一覧

HTML/CSS
とりとん
とりとん

LPにアニメーション入れてほしいんだけど、動きの一覧とかってある??

LPというかアニメーションはデザイン次第やけん一覧なんて考えたこともなかったな~


今回は、以下のような方に向けた手軽に使えるアニメーションの一覧を作ってみました!

  • コーディングの依頼をする方
    そんなに工数もかからず、簡単に付けれるアニメーションがあるんだと知っていただいて、「ここに○○アニメーション入れてー」と依頼しやすいように。
  • アニメーション付きのコーディング勉強中の方
    →デモとコードを記載しているので、実際の動きと記述方法がわかります。コードはコピペで使えるようにしているので、値を調節してそのまま利用OK。

ちなみに・・

アニメーションは意図があって付けるものであって、やたらめったら付ければよいというものでは無いというのは業界では当たり前になっています。


また、最新のイカしたアニメーションだったり、LPならこれだろ的なアニメーションが存在するといった内容では無いので、そういう期待はしないでくださいw

とりとん
とりとん

さっそく手軽に使えるアニメーションを見てみよう!

スポンサーリンク

大きくなったり小さくなったり繰り返す

ボタンとかに使われることが多いアニメーションです

See the Pen anime_cvbtn01 by とりとん (@darakerutoriton) on CodePen.

一定時間でキラッと光る

とりとん
とりとん

ボタンが光ってる感じに見えて結構目立つね!

See the Pen anime_cvbtn02 by とりとん (@darakerutoriton) on CodePen.

グラデーションに光る

ワンランクおしゃれなボタンになるね

See the Pen anime_cvbtn03 by とりとん (@darakerutoriton) on CodePen.

横からでてくるコンテンツ(スライドイン)

これはブロックごとだったり画像単体でも使われてるね

See the Pen slidein by とりとん (@darakerutoriton) on CodePen.

ふわっとでてくるコンテンツ(フェイドイン)

テキストだったりブロックごとにつけたり、万能アニメーションですね

See the Pen fadein by とりとん (@darakerutoriton) on CodePen.

くるっと回転する

使うシーンはあまり無いかもですが、個人的には好き

See the Pen windmil by とりとん (@darakerutoriton) on CodePen.

マウスホバーすると大きくなる

リンク付きの画像とかによく見るね

See the Pen big by とりとん (@darakerutoriton) on CodePen.

まとめ

今回は、簡単にピンポイントで付けれるアニメーションだけを紹介しました。

また思いついたり、ご要望があれば追加更新するかもですw


当ブログは、他にもwebにまつわることを紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい!

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインからも受け付けていますのでTwitterのDMからお気軽にご連絡ください^^

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました