ダッシュで奪取

元SIerだけどWebエンジニアになりたい!

【CSS】画像をシャカシャカさせる

おみくじをシャカシャカさせたくなったので、シャカシャカしました。
画像の上にマウスカーソルを乗せるか、タッチするとシャカシャカします。
サンプルページ

目次

  1. HTML
  2. CSS
  3. おわりに

1.HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>おみくじシャカシャカ</title>
    </head>
    <body>
        <div class="test20190423" ontouchstart="">
            <img src="images/omikuji.png" class="shake" width="20%">
        </div>
    </body>
</html>

ontouchstart=""

CSSの「:hover」がスマホ・タブレットではうまく動かないようなので追加しました。「指で触ったときに発生する」イベントのようです。

2.CSS

.shake:hover {
    display  : inline-block;
    animation: syakasyaka .3s 5;
}

@keyframes syakasyaka {
    0%   {transform : translate(0px,  0px)}
    50%  {transform : translate(30px, 30px)}
    100% {transform : translate(0px,  0px)}
}

.test20190423 {
    text-align: center;
}

shake:hover

マウスカーソルをshakeクラスの上に乗せたときの設定です。

animation: syakasyaka .3s 5;

3秒の間に5回シャカシャカします。無限に繰り返しさせる場合は、infiniteと記述します。

@keyframes syakasyaka

「syakasyaka」という名前のアニメーション(動き)を指定します。

0%、50%、100%

0%はアニメーション開始時、100%は終了時の設定を記述します。50%は中間時。
%をもっと分ければ、細かい動きを表現できそうです(ブルブルさせるとか)。

transform : translate(x軸方向の移動,y軸方向の移動)

要素を移動させるプロパティです。
今回の場合だと、開始時はデフォルトの位置に表示させておいて、途中でx方向とy方向に30pxずつ動かしてから、元の位置に戻るようにしています。

3.おわりに

おみくじプログラムに設置してみたくてシャカシャカさせました。
入れてみたら後で追記します。