CSSボタンをアニメーション!CSShakeなら簡単にカスタマイズ出来るよ!

CSSボタンアニメーションのバリエーション

CSShakeのアニメーション要素は沢山あるんですよ。

 

ここでは「oyakun画像」を使って、アニメーションの様子とテキストをご紹介していきます。

OYAKUN
OYAKUN
スマホなら画像をタップすることで動きます。

ベーシックシェイク

CSShakeの基本アニメーションです。シェイクシェイク!

 

ベーシックシェイクのCSS

<div class=”shake”>画像URL</div>

 

スローシェイク

シェイクの動きがゆっくりに。へ〜!みたいな時とかスローモーションイメージに使えそうですね。

 

スローシェイクのCSS

<div class=”shake-slow”>画像URL</div>

 

リトルシェイク

小刻みに動きます。怒りとか、恐怖とか寒くて震えてるみたいな。

 

リトルシェイクのCSS

<div class=”shake-little”>画像URL</div>

 

ハードシェイク

一生懸命ハードに動きます。慌ててる時に使えますね。

 

ハードシェイクのCSS

<div class=”shake-hard”>画像URL</div>

 

水平シェイク

水平にスイスイ動きます。oyakunの目の感じがピッタリ。

 

水平シェイクのCSS

<div class=”shake-horizontal”>画像URL</div>

 

垂直シェイク

垂直にスイスイ動きます。タワー・オブ・テラー乗ってます的なみたいな。

 

垂直シェイクのCSS

<div class=”shake-vertical”>画像URL</div>

 

回転シェイク

クルクルしてる感じに動きます。あわわわwマジどうしようwwwて言ってそう。

 

回転シェイクのCSS

<div class=”shake-rotate”>画像URL</div>

 

不透明シェイク

不透明な感じに動きます。自信ない時とか、テレポートする時とかにぜひ。

 

不透明シェイクのCSS

<div class=”shake-opacity”>画像URL</div>

 

クレイジーシェイク

クレイジーな動きです。狂ってます。連続エネルギー弾打ってる◯ジータみたい。

 

クレイジーシェイクのCSS

<div class=”shake-crazy”>画像URL</div>

 

コンスタントシェイク

ずっと動くやつですね。((((;゚Д゚))))ガクブル・・に使えそうですね。

 

コンスタントシェイクのCSS

<div class=”shake-constant”>画像URL</div>

と、この画像だけコンスタントに動いてない!ので別記事にてご紹介します!

 

チャンクシェイク

お財布を振ってる感じ。モノを振っている感じに使えそうです。

 

チャンクシェイクのCSS

<div class=”shake shake-chunk shake-constant”>画像URL</div>

 

こんな感じで「CSShake」を使うことで、ボタンのアニメーションは簡単に実現できます。

 

アヒルン
アヒルン

いや〜おもしろいな〜

うちゅうじん
うちゅうじん

アヒルンもな

 

WordPressWordPressのパーマリンクとpost-id設定は意外と大事という話

CSSボタンをCSShakeで簡単にアニメーション!まとめ

https://pixabay.com/users/PIRO4D/

というわけでCSShakeを使ってCSSボタンのアニメーションは上手く行きましたか?

 

ユーザビリティ向上というよりは

  • インパクトを与えられる
  • 見てる人が楽しめる

という事に繋がりそうなCSShakeのアニメーション。

 

ただ見る人によっては気持ち悪くなってしまうかもしれません(゚A゚;)ゴクリ

 

動きがあったほうが分かりやすい説明のときに使っていく程度で十分でしょう。

 

OYAKUN
OYAKUN
個人的に垂直と不透明シェイクの動きが好きです。スキあらば多用したいw

オススメ【知っ得】Googleアナリティクスのレポートをテンプレートで簡単作成!

知っ得!Search Consoleのアカウントを追加設定する方法

【狂喜】Google apps scriptの記事をレバレジーズ様にご紹介していただいたお話
お役立ちxyzがレバレジーズ株式会社様よりご紹介にあずかりました! レバレージ様の紹介記事はコチラ 僕自身プログラミング初心者であって、少しでも誰かの役に立てば良いな〜という一心で記事更新していたのですが、まさか企業様よりご紹介いた...

コメント

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