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

こんな画像を

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

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

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

htmlの中身

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

cssの中身

[code]
#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);}
}
[/code]

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

サンプルページ

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

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

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

【ハートブレーン】https://blog.heart-kokoro.net