http://cho45.stfuawsc.com/misc/css3-sine-wave.html

CSS 自体では自由な曲線は描くことができないが、CSS animation では、animation-timing-function で cubic-bezier() を使い定義したベジェ曲線に従ってプロパティーの変化量を決めることができる。

なので、複数の animation する要素を組合せることで、全体としてサイン波を描くことができる。

ポイントは animation-timing-function はキーフレーム間 (1回のアニメーション全体ではない) に適用される点で、勘違いしているとひたすらハマる。

上記の例ではアニメーションさせたままだが、animation-delay に負の値を指定して animation-play-state: paused; を指定すれば止めた状態にもできる。

http://cho45.stfuawsc.com/misc/css3-sine-wave2.html