classを指定するだけで簡単にタグ要素を振るえるアニメーションにする方法【CSShake】｜DAD UNION

CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにする方法をご紹介します。

Contents

CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするCSSの記述
CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするHTMLの記述
CSShakeを使って各要素を振るえるアニメーションさせたデモページ
ソース元：CSShake

CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするCSSの記述

※csshake.min.cssファイルを読み込みます。その他は必要に応じて変更して下さい。

<style>
body{
  text-align: center;
  font-size: 28px;
  line-height: 1.8em;
  font-weight: bold;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0 30px 0;
  font-size: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="csshake.min.css">

CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするHTMLの記述

※divタグ要素に10パターンの振るえるアニメーションにするclassを指定します。

<h1>文字をマウスオーバーすると文字が違ったアニメーションで振るえます。</h1>

<div class="shake">shake</div>
<div class="shake-hard">shake-hard</div>
<div class="shake-slow">shake-slow</div>
<div class="shake-little">shake-little</div>
<div class="shake-horizontal">shake-horizontal</div>
<div class="shake-vertical">shake-vertical</div>
<div class="shake-rotate">shake-rotate</div>
<div class="shake-opacity">shake-opacity</div>
<div class="shake-crazy">shake-crazy</div>
<div class="shake-chunk">shake-chunk</div>