checkbox,radioがチェックされた時にちょっとアニメーションさせてみる
以前に、
CSSアニメーションでinputに動きをつける
という記事を書きましたが、続きみたいな感じで今回はcheckboxボタン,radioボタンにアニメーションをつけてみました。
基本、checkboxボタン,radioボタンは装飾ができないのですが、アニメーションかけることは出来るようです。
（今までまったくそんなことをしようとしなかった・・・）
以下のサイトを発見したので、実際に試してみました。
Animated CSS3 Input Checkboxes with – Checkbox.css
デモは以下からご覧ください。
DEMOでは、
・拡大
・縮小
・フェードアウト的な
・上にあがる
・回転
の5つを実装しています。
checkbox,radioでcssは同じで大丈夫です。
拡大
|
1 | <label><input type="checkbox" name="scale" class="checkbox-scale"/> 拡大する</label> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .checkbox-scale:checked { animation: 0.5s linear 0s normal 1 running scale; } @keyframes scale { 30% { transform: scale(1.3); } 70% { transform: scale(1); } 100% { transform: none; } } |
ちなみにanimationの説明をすると、
左から、
animation-duration・・・アニメーションの長さ
animation-timing-function・・・アニメーションのイージングを指定
animation-delay・・・アニメーションが開始するまでの時間
animation-direction・・・アニメーションを繰り返す場合の方向
animation-iteration-count・・・アニメーションの繰り返し回数
animation-play-state・・・再生中か一時停止かを指定
animation-name・・・アニメーション名（任意）
をanimationに一行で省略して書いたものなります。
個別に指定することもできます。
縮小
|
1 | <label><input type="checkbox" name="shrink" class="checkbox-shrink"/> 縮小する</label> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .checkbox-shrink:checked { animation: 0.5s linear 0s normal 1 running shrink; } @keyframes shrink { 30% { transform: scale(0.7); } 70% { transform: scale(1); } 100% { transform: none; } } |
フェードアウト的な
|
1 | <label><input type="checkbox" name="fade" class="checkbox-fade"/> フェードアウトする</label> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .checkbox-fade:checked { animation: 0.8s linear 0s normal 1 running fadeout; } @keyframes fadeout { 40% { opacity: 0; } 80% { opacity: 0.5; } 100% { opacity: 1; } } |
上にあがる
|
1 | <label><input type="checkbox" name="top" class="checkbox-top"/> 上にあがる</label> |
|
1 2 3 4 5 6 7 8 9 10 11 | .checkbox-top:checked { animation: 0.5s linear 0s normal 1 running slidetop; } @keyframes slidetop { 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } |
回転
回転はキーフレームのアニメーションを使う必要はありません。
|
1 | <label><input type="checkbox" name="rotate" class="checkbox-rotate"/> 回転する</label> |
|
1 2 3 4 | .checkbox-rotate:checked { transition: all 0.2s; transform: rotate(360deg); } |
もっといろんなことが出来ると思うのでいろいろと試してみたいです。
それよりも少しでもいいから装飾出来るようになってほしいな〜と思います。
Author Profile
スターフィールド編集部
SHARE
