CSSのみで背景画像を左右にカタカタふれるような動作をさせたい時

即席切り抜き

こんな画像を

一応gifアニメ

こんな風に動かしたい。
しかもcssのみで。

というのも、動作を必要とするwebサイトのサーバーがjimdoだったので
できるだけjQueryを避けたかったのです。面倒だから。

無理かな?と思ったのですが、無事解決しました。同僚が。

htmlの中身

<div class="box"><a href="example.html">テスト</a></div>

cssの中身

#box a {
    display: block;
    width: 400px;
    height: 20px;
    padding: 300px 0 0;
    box-sizing: content-box;
    background: url(bg-test.png) no-repeat left top;
    }

#box a:hover {
    -webkit-animation: spin .3s linear infinite;
    -moz-animation: spin .3s linear infinite;
    -ms-animation: spin .3s linear infinite;
    -o-animation: spin .3s linear infinite;
    animation: spin .3s linear infinite;
    }

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(10deg);}
    50% {-webkit-transform: rotate(0deg);}
    75% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(0deg);}
    }

@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    25% {-moz-transform: rotate(10deg);}
    50% {-moz-transform: rotate(0deg);}
    75% {-moz-transform: rotate(-10deg);}
    100% {-moz-transform: rotate(0deg);}
    }

@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    25% {-ms-transform: rotate(10deg);}
    50% {-ms-transform: rotate(0deg);}
    75% {-ms-transform: rotate(-10deg);}
    100% {-ms-transform: rotate(0deg);}
    }

@-o-keyframes spin {
    0% {-o-transform: rotate(0deg);}
    25% {-o-transform: rotate(10deg);}
    50% {-o-transform: rotate(0deg);}
    75% {-o-transform: rotate(-10deg);}
    100% {-o-transform: rotate(0deg);}
    }

@keyframes spin {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(10deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(-10deg);}
    100% {transform: rotate(0deg);}
    }

これで動きます。普通に作れば。

サンプルページ

しかし、jimdoでは横にぶれてはくれず、回転します。
何故かといえば、spinの部分。
てっきりコードの一部かと思ったら、適当に名前をつけて良いそうです。
なので、spinを全て適当な単語に置き換えたら、無事動きました。

角度は transform: rotate の部分で調整します。
速度は .3s の部分。速くしたい時は数値を高くしてください。

1から10まで方法を探し出した本人の目の前で、他人のふんどしで勝負をしてみました。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ