単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡

マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;

HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

oriDomi - Fold up the DOM like paper. CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 Safariで見て頂きたいのですが、次のようにブロック要素を立体的に折り紙風にたたんだようなエフェクトをかけることができます。 iPadなどではお馴染みのあのUIをブラウザベースで実現するためのライブラリで、iOSでも使えます HTML5で折畳みインタフェースを持ったアプリを実装する際に便利に使えそうです 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル ピュアCSSなのに折りたたみ可能なツリーメニュー実装例

パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。 ※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。

PFold: Paper-Like Unfolding Effect | Codrops 紙を折りたたむようなエフェクトが作れるjQueryプラグイン「PFold」 3D Transform を使っているのでSafari等のブラウザでご確認下さい。 本をめくるというよりは、折りたたんだ紙をめくるUIなんですがなんともオシャレです こんな素敵なインタフェースも数年後には当たり前の物となっていると思うとワクワクしますね 関連エントリ CSS3の3D Transformで3Dのホバーエフェクト実装例 キューブが3Dに回転するUIを作れる「jqCube」

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

CUSTOM DROP-DOWN LIST STYLINGという記事で、ドロップダウンメニューをカスタマイズするコードが紹介されています。 シンプルなフェードのアニメーションがあっていい感じです。 CUSTOM DROP-DOWN LIST STYLING

画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。

The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」

JZoopraxiscope - jQuery plugin for making animations from static images. 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 次のような横長の画像を高速に横にスライドさせることでアニメーションさせてしまうものです。 ブラウザプラグイン不要で好きなサイズでアニメーションさせられます。 GIFアニメでもなく、FlashでもHTML5のvideoでもないアニメーション実装方法として知っておいてもよさそう 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Tran

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。

Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを

16 Best CSS3 Transitions And Animations Tutorials WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル。 CSS3が登場したことによって、こんなことできるの？という驚きを最近よく感じていますが、そういうデモのチュートリアル集です。 16個ありますので、すべて見るだけでも見ておくべきだと思いましたのでシェア。 紙を折りたたむ風UIは スクロールで驚きのアニメーション 紙の折畳みや折り曲げエフェクト iPadの輝きをインタラクティブに変更 ビットマップグラフィクでマリオ。画像もキャンバスも利用していない、ピュアなCSS 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3で出来たクールなLightBox実装チュー