[css] 簡単アニメーション設定

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページをリッチコンテンツにする為にCSSでサクッとできると非常に楽でしょう。
 

そんな時、簡単ポイントを押さえておくだけで、自力で大体の事はできてしまいます。
 

もちろん、世の中で出回っているライブラリを豊富に使ってもいいですが、WEBページを出来るだけ軽くしたいとか、無駄な処理を入れたくないような場合は、CSS記述をサクッと行なって、簡易に設置出来てしまった方が、効率もいいです。

マウスオーバーで、リンク画像を少し浮かせる。

マウスを下の画像に乗せてみましょう。
 

angry-2030006_640

解説

ポイントは、ソース内の「アニメーション記述」です。詳細はCSSのリファレンスページなどを見るとパラメータなど理解できると思います。
 

transition-propertyは、このアニメーションの対象となるCSS命令(top , box-shadowって書いてもいいが、汎用性を考慮してall)
transition-durationは、アニメーションの実行時間
transition-timing-functionは、アニメの挙動

 

これを流用すると、フォームの送信ボタンをクリックした時に、ボタンをアニメーションさせたり、マウスオーバーで、画像を回転させたり、サイズを変えたり色を変えたり・・・と、汎用性が高く、簡単に記述できる事がわかります。
 

注意ポイント

hoverなどのイベントで記述するパターンですが、基本記述の側に「top:0」として、元の値を書くのを忘れない様にしましょう。
 

経験上、うまく動かない場合は、これの書き忘れが多いでしょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です