そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル

仕組みは正方形のオブジェクトを入れ、それにCSSのlinear-gradientで斜めのストライプを作って、それをtransformでアニメーションしています。

今回はjQueryプラグイン化し、久々にGithubにアップしました。
uda2/barbersignpole
グラデーションの模様は好きなデザインに指定できます。値は色とパーセントです。
方向はvectに数値を入力することで設定します。テンキーを基準に7が左上、9が右上、3が右下、1が左下になります。
speedは一連のアニメーションの時間（秒）です。

まず、グラデーションですが普通に色を並べるとストライプにならないので色を指定すると次の色を0.005％後に指定する事でグラデーションを抑止しストライプにしています。
アニメーションはCSSのグラデーションは背景画像なのでシンプルに背景画像位置（background-position）をいじっても再現できるのですが重いので、正方形のオブジェクトを追加してそれをtransformで移動しています。
一見冗長に見えますがタスクマネージャー読みで3倍ぐらい高速になります。

※現時点のGoogleChromeは斜めのグラデーションが汚く細かい線が再現されないです。

手法はFlashではよく使われてるもので画像を1ピクセル毎にスライスしたものを用意して動かすのだけど最近はFlash使って無いのでjQueryで作ることにした。

手順は下記の様な感じ
・画像を読むのを待つ。
・ul＆liのリストで縦ピクセル分にスライスする。
・スライスした画像を背景にして背景の位置を動かす。

やってみるとfirefoxではスローモーションになってるので背景の位置を変えず余白を変更する事で動かしてみたが解決しなかった。firefoxは苦手なのかもしれない。
kirin wave
※キリンの絵をクリックするとアニメーションが始まり、もう一回クリックすると止まります。

全く無意味だけどjQueryプラグイン化してみた。

更に世界一簡単なGithub入門を見ながら作ったライブラリをGithubで公開してみた。（Gitすら分ってないので怪しいですが）
https://github.com/uda2/kirinwave

最終的に一番時間が掛かったのはキリンの絵を描く行程でした。