今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animationページ上のさまざまな要素やコンポーネントにclassを加えるだけで、CSS3アニメーションを適用できるスタイルシートを紹介します。 既存のナビゲーションやボタンにちょっとアニメーションを与えたい時にも最適です。 HTMLにclassを加えて汚したくない人は、jQueryやスクリプトでclassを加えて、クリーンな実装もできます。
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
CSS3のアニメーションってすごい。 - ありの日記
下の記事でほとんどCSSだけでアニメーションしているサンプルがっ。 -webkit-transformを使ったCSSアニメーションを試してみた at HouseTect, JavaScriptな情報をあなたに CSS3のアニメーション機能ってのはすごい。JavaScriptで動かすのに比べて簡単でかつなめらかに動く気がする。まだ、動作するブラウザが限られているっぽい（Webkit系とFirefoxくらいなのかな）んだけど、今からでもやっておくべきだと思った。 CSSアニメーション系の仕様 CSS Animations Module Level 3 CSS Transitions Module Level 3 CSS 2D Transforms Module Level 3 CSS 3D Transforms Module Level 3 CSS transformを使って3Dっぽく見せるサ
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery
