CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
スマホでアニメーションするときはcss3の「translate3d」を使おう
Posted: 2011.09.16 / Category: javascript / Tag: CSS3, jQuery, アニメーション スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。 jQueryのアニメーション たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。 javascript $('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); }); css3のアニメーション 同じことをcss
iPhone向けCSS3サンプル
CSS3によるアニメーション 回転 回転+縦のサイズを拡大 背景のエフェクト [3D]回転 [3D]回転+スケール [3D]回転(自動) 移動のアニメ 移動のアニメ(行き帰り) 移動のアニメ(キーフレームを複数使用) 移動のアニメ(時間差) 移動のアニメ(複数のアニメの合成) マスク [3D]裏面の描画(作成途中) SVG アニメーションのパターンの解説 Transition Timing Functions < CSS | The Art of Web 他サイトの作例 Poster Circle 中島聡氏が見せるhtml5の未来：前半6本 中島聡氏が見せるhtml5の未来：後半6本 safari4 betaで実装されたCSS Animationを使ってみました。 : アシアルブログ ※このページはフルスクリーンモードをサポートしています。iPhoneのホームに保存して、アイコンをクリック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
https://ameblo.jp/ca-1pixel/entry-11497184837.html
http://webdesignmatome.com/webdesign/js_anim
