WordPressの設定

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

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

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

 

ここでは「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
個人的に垂直と不透明シェイクの動きが好きです。スキあらば多用したいw

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

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

紹介されたよ!
【狂喜】Google apps scriptの記事をレバレジーズ様にご紹介していただいたお話

本サイトがレバレジーズ株式会社様よりご紹介にあずかりました! >レバレジーズ様の紹介記事はコチラ   僕自身プログラミング初心者であって、少しでも誰かの役に立てば良いな〜という一心で記事更新 ...

続きを見る

機能拡張!!
Google apps scriptを無料で機能拡張出来る29個のAPIまとめ

Google apps scriptは「G Suite Services(Google apps script 入門|何が出来るの?)」で提供されているサービス以外にも、APIと連携することでその機能 ...

続きを見る

  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

Copyright© OYAKUDACHI.XYZ , 2019 All Rights Reserved.