GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。背景色を指定しても発生することがあります。また、一部の子要素だけちらつくこともあります。ちなみに、CSS 2D Transformsを指定した要素でもちらつきが発生するときがあります。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」を指定 これがいちばん効果の高い対処方法です。ほとんどのちらつき問題が解消されます。2D Transformsには関係ないプロパティのはずなのですが、なぜか有効な対策です。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」と「overflo
WebページをRetina対応させるテクニック～基礎知識編
メディアクエリ―高精細ディスプレイに対応させるには -webkit-device-pixel-ratioについて 先のデバイスピクセル比（device pixel ratio）の項目でも解説しましたが、高精細ディスプレイ向けにCSSで対応するにはメディアクエリ（Media Queries）を使うわけですが、その際の条件式に用いられるのが、「-webkit-device-pixel-ratio」というものです。Retinaディスプレイ搭載のiOS端末を例に取ってみましょう。 Retinaディスプレイのデバイスピクセル比は「2」です。つまり、デバイスのピクセル密度の最低値が2の場合のみスタイルを適用するというメディアクエリを指定すれば良いわけです。 と、ここまで解説しておいて何ですが、この-webkit-device-pixel-ratioはもともと、アップルがRetinaディスプレイを開発し
CSS Transitions, Transforms and Animation Tutorial
CSS3 Transitions, Transforms, Animation, Filters and more! Introduction This website is designed to help you build modern sites that are able to make use of some of the newer, exciting parts of CSS. The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform. Though of course your browser must supp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
