今作っているアプリでちょっとしたギミックをいれるのにCSS3のanimation-xxxxを使っているんですが、これがすこぶる便利です。(^^v
CSS3アニメについてはこちらのページが良くまとまっています。
http://ri-mode.com/rainbow/2013/06/10/css3_keyframes_transform/
ていうか僕はこのページ以外のリソースにはほとんど目を通してないんですが。。。(^^;;;
それでも、なんとなくエフェクトが作れちゃいます。
アニメーションの作成などまったくの門外漢で、やろうと思ったこともほとんどないんですが多分、
- 開始(0%)と終了(100%)の状態を定義して、
- 中間(n%)でどういう状態を経過するかを定義するだけ
という仕様がプログラマ脳と相性が良いんだと思います。
また対象要素を最初hiddenにしておけば、showした瞬間にアニメーションが始まるのもスクリプトとの相性が良くてGoodです。
さて、このCSS3アニメ、素のままでもそれなりに使えますが3つ4つと定義していくとやっぱりだんだん面倒になってくるので既存のコードを切り出してjQueryプラグイン化してしまいました。
http://shunjikonishi.github.io/jquery-animateDialog/
制作は全部で3時間くらい。GitHub IOのおかげでソースだけでなくホームページまでこんな短時間で準備できてしまうのは素晴らしすぎます！
使い方は多分、上記ページを見れば(僕の適当英語でも)わかると思います。
サンプルはテキストオンリーのシンプルな要素を使ってますが、もちろんイメージ等を駆使した凝った要素であってもアニメーションさせることができます。
自作のアニメーションを作るのもkeyframeを定義するだけなので、職人の手にかかればかなり凝ったものを作ることもできると思います。
いけてるアニメーションを作った方はプルリクくれればマージしますよ。(^^;
(適当英語の校正も歓迎です。)