Blog

checkbox,radioがチェックされた時にちょっとアニメーションさせてみる

2016.05.25Cat:css3 デザイナー

以前に、
CSSアニメーションでinputに動きをつける
という記事を書きましたが、続きみたいな感じで今回はcheckboxボタン,radioボタンにアニメーションをつけてみました。

基本、checkboxボタン,radioボタンは装飾ができないのですが、アニメーションかけることは出来るようです。
(今までまったくそんなことをしようとしなかった・・・)
以下のサイトを発見したので、実際に試してみました。

Animated CSS3 Input Checkboxes with – Checkbox.css

デモは以下からご覧ください。

DEMO

DEMOでは、
・拡大
・縮小
・フェードアウト的な
・上にあがる
・回転
の5つを実装しています。

checkbox,radioでcssは同じで大丈夫です。

拡大

ちなみにanimationの説明をすると、
左から、
animation-duration・・・アニメーションの長さ
animation-timing-function・・・アニメーションのイージングを指定
animation-delay・・・アニメーションが開始するまでの時間
animation-direction・・・アニメーションを繰り返す場合の方向
animation-iteration-count・・・アニメーションの繰り返し回数
animation-play-state・・・再生中か一時停止かを指定
animation-name・・・アニメーション名(任意)

をanimationに一行で省略して書いたものなります。
個別に指定することもできます。

縮小

フェードアウト的な

上にあがる

回転

回転はキーフレームのアニメーションを使う必要はありません。

もっといろんなことが出来ると思うのでいろいろと試してみたいです。

それよりも少しでもいいから装飾出来るようになってほしいな〜と思います。

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ