CSSボタンアニメーションのバリエーション
CSShakeのアニメーション要素は沢山あるんですよ。
ここでは「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>
回転シェイク
クルクルしてる感じに動きます。あわわわｗマジどうしようｗｗｗて言ってそう。
回転シェイクの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で簡単にアニメーション！まとめ
というわけでCSShakeを使ってCSSボタンのアニメーションは上手く行きましたか？
ユーザビリティ向上というよりは
- インパクトを与えられる
- 見てる人が楽しめる
という事に繋がりそうなCSShakeのアニメーション。
ただ見る人によっては気持ち悪くなってしまうかもしれません(ﾟＡﾟ;)ｺﾞｸﾘ
動きがあったほうが分かりやすい説明のときに使っていく程度で十分でしょう。
オススメ【知っ得】Googleアナリティクスのレポートをテンプレートで簡単作成！
知っ得！Search Consoleのアカウントを追加設定する方法
-
-
【狂喜】Google apps scriptの記事をレバレジーズ様にご紹介していただいたお話
お役立ちxyzがレバレジーズ株式会社様よりご紹介にあずかりました！ レバレージ様の紹介記事はコチラ 自身がプログラミング ...
続きを見る