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; を指定すれば止めた状態にもできる。
昔 keyString.js という KeyBoardEvent からなんとなく押されたキーの文字列表記になおすやつを書いたことがある。
しかしこれは実装が不完全で一部のキーがちゃんと判定されなかったりした。が、マルチプラットフォーム・マルチブラウザで検証するような気力はないし、そんなことしても無駄になるのは目に見えているのでやる気はおきない。
KeyBoardEvent に key というプロパティが DOM Level 3 Events ではできることになっていて、これは Enter キーの場合 "Enter" という文字列が入り、物理的なキー位置(ということになっている謎の数値)ではなく、論理的なキーを表現するということになっている。が、全てのブラウザで同じように実装されているとはいえない。
ということで KeyBoardEvent.key には polyfill をつかおう。
https://github.com/inexorabletash/polyfill/blob/master/keyboard.js
を読みこむだけでいい。完璧ではないがおそらく現時点で一番まともだと思う。このファイルにはライセンスが書いてないが polyfill 全体で Public Domain となっており適当に扱っても問題ない。
KeyBoardEvent.key は modifierKey (シフトキーとか) の状態は当然含んでいないので、単に
if (e.key === 'Enter') {
} で判定してしまうと、Shift+Enter や Alt+Enter なども同じもの扱いになってしまう。かといって
if (e.shiftKey && e.key === 'Enter') {
} else
if (e.altKey && e.key === 'Enter') {
} else
if (!e.shiftKey && !e.altKey && e.key === 'Enter') {
} とか全部書くのは見通しが悪い。
ということでしかたなしに
var key = (e.altKey?"Alt-":"")+(e.ctrlKey?"Control-":"")+(e.metaKey?"Meta-":"")+(e.shiftKey?"Shift-":"")+e.key;
みたいなのを1行書いて modifier key のプリフィックスをつけておくとやはり楽になる
if (key === 'Shift-Enter') {
} else
if (key === 'Alt-Enter') {
} else
if (key === 'Enter') {
}