box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。(今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください) CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves 'Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
こんにちは、橋本です。 今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。 iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。 そんなときにこの記事を参考にしてもらえると幸いです。 今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。 IE、Firefox、Operaなどの他のブラウザは対象外です。 (なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。) 早速ですが、CSS3でアニメーションを実装するためには、以下の2つの方法があります。 1. transitionプロパティでアニメーションを定義する 2. animationプロパティでアニメーションを定義する また、アニメーションを定義する際には、通常のプロパティに加えてtran
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
An explanation of the CSS animation on Apple's iPhone 4S webpage October 25, 2011 The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At
It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. First attempt I have been working on a project that targets mobile WebKit browsers so it was natural to explore
「視聴者の目に引っかかるエフェクトとは何か?」を考えつつ、長年、トップランナーとして第一線でアニメエフェクトを作り続けてきた橋本敬史さん。クセのある気持ちいいエフェクトを作るためであれば物理法則や時間曲線すらもねじ曲げながら、誰もマネのできないエフェクトを作り上げてきました。普段は物語やキャラクターの背後でふと見逃してしまいそうな炎や水、スパークなどのエフェクトは、どのようにして生き生きとした映像表現となり得るのでしょうか。 本稿は日本最大のゲーム開発者向けカンファレンス「CEDEC2011」にて「アニメのエフェクト、ゲームのエフェクト」と題して行われた講演で、休憩を挟んで前後編に分かれていたものを1本にまとめました。橋本さんが携わってきた多くのアニメーション作品で培われた職人技から、デジタルアニメーションやゲームにおけるエフェクト作りまで深く掘り下げています。 ◆『アニメのエフェクト、ゲ
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
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア(β版中につき無料)。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で
CSS Zoetrope (More Experiments) Yup, all CSS and a very minimal amount of html (and pinch of js for the controls). You can find the source here and/or you can read my small blog post about it here. What is a Zoetrope? An old timey moving picture machine is what it is. You can read more here. Oh no! Your browser does not support some of the technology required for this experiment. You'll need a rel
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
m 150 50 c 0 50 35 65 70 30 c -35 35 -20 70 30 70 c -50 0 -65 35 -30 70 c -35 -35 -70 -20 -70 30 c 0 -50 -35 -65 -70 -30 c 35 -35 20 -70 -30 -70 c 50 0 65 -35 30 -70 c 35 35 70 20 70 -30 l 0 50 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 l 0 -50 /* Apply the animation to the target element. */ /* Hardware acceleration requires a nested element for each axis. */ #target { -webkit-animation: myPathX 13
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く