※スマホ対応はしてません。

カテゴリー: CSS

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目)

カテゴリー: CSS, JavaScript

(追記: 2018年10月)何年か経ってから見ても内容大丈夫そうでした。

この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!)

さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。

どうやったらスムーズに動くかってのを解説したいと思います。

なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。

先に結論

概念的なの

  • GPU合成レイヤーを適切に使うと早い
    • いわゆるハードウェアアクセラレーション
  • 何がCPUで、何がGPUで描画されるか知っておくべき

実際的なの

  • transformやopacityはイケてる
    • 他のアニメーションはコスト高いっぽい、特に色
  • 合成レイヤーの内容を変更しない
  • パラパラアニメは全コマ読み込み可視性の制御で
  • アニメの「コマ」が少なければ少ないほどハードウェアアクセラレーションの効果が出る

ぬるぬるアニメ、ざらざらアニメ

まずは実例からご覧頂きましょう。

(さらに…)

全世界で最も多く利用されているCSSプロパティを発表します。ぱんぱかぱーん!(CSS Property Advent Calendar 2013 – 03日目)

カテゴリー: CSS

CSS Property Advent Calendar 2013の3日目の記事です。昨日は越智さんのもっと広まって欲しい CSSでした。明日も越智さんです。

CSSじゃなくてCSSプロパティのAdvent Calendarです。CSSには大量のプロパティが定義されており、それを組み合わせて様々なデザインを作るわけですが、ああ何と言うか、もう前置きも面倒ですね、はいじゃあ本題に入ります。

順位発表

現在世界中の閲覧されたウェブページでのCSSプロパティの使用率の統計、こんなんになりました。(2013-12-04 02:07現在。あと適当に数値を丸めています。)

(さらに…)

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。

カテゴリー: CSS

いえーいCSSでぐりぐり動かしてますか!

やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。

CSSでのアニメーションは二種類

実はCSSのアニメーション、と言っても二種類あります。

  • transition … マウスホバーとかの操作時に動くやつ
  • animation … ずっと動き続けるやつ
  • プロパティは割と似てる
  • 今のところ、どちらもベンダープレフィクスが必要

頻繁に使われるのは前者でしょうか。

transitionでさくっとアニメーション

リンクにカーソルを載せると文字色が変わる、という例。

:link {
  color: #00f;
  transition: color .5s;
}
:link:hover {
  color: #f00;
}
  • transitionプロパティで設定します。
  • 値は「変化させたいプロパティの名前」と「変化にかける時間」です。
    • 時間の単位はsで、secondsつまり秒です。
    • (ちなみにCSSは0.1を.1と記述する事が出来ます。)
  • 複数設定する場合はカンマ,で区切ります。
  • 他に変化のさせ方と、変化前の待ち時間を設定する事が出来ます。

animationでがつっとアニメーション

.selector {
  animation: blink 1s infinite;
}
@keyframes blink {
      0% { opacity:1 }
    100% { opacity:0 }
}
  • animationと@keyframesの二種類が必要です。
  • animationから利用するkeyframesの名前を指定します。
  • @keyframesでアニメーションの内容を指定します。
  • animationで指定するのは全体の時間です。
  • @keyframesで指定するのは時間のうちの進行割合です。
  • 再生時間はanimationで指定します。
  • 何も指定しなければ、アニメーションは0→100%までやって終わります。
  • infiniteを指定すると、何度も繰り返します。
  • alternateを指定すると、行って戻ってが出来ます。

もっとくわしく

MDNあたりを。

おしまい

実は後日の記事への布石です。

JavaScriptから見たCSS。CSSを学ぶという事。(CSS おれおれ Advent Calendar 2012 – 24日目)

カテゴリー: CSS, JavaScript

CSS おれおれ Advent Calendar 2012 – 24日目

CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。

先に結論を申し上げると

CSSがあるお陰でJavaScriptが便利に! JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利! というお話です。

なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。(もちろん、あれも楽しいよね!) あ、あとSVGやらも範囲外です。

断定的に申していても、常々例外はあるものです。

JavaScriptで出来る事、出来ない事

(さらに…)

CSSだけでウィンドウぴったりに表示する編集画面を作る。(CSS おれおれ Advent Calendar 2012 – 23日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 23日目

メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか? JavaScript使っちゃいます? それCSSで出来るよ!

ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。

概要

ネタバレ。

height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。

高さを100%に出来る場合、出来ない場合について知る

昔書いたのでちらと読んでみてください。

一言で言うと、上位要素に高さの指定がある場合にのみ出来るという感じです。

最上位要素の高さを指定する

HTMLのドキュメントツリーにおける最上位要素といえば、もちろんhtml要素です。

あとbody要素もついでに設定しちゃいましょう。こちらは一般的なブラウザーでは、初期状態で余白が指定されているので、それもリセットします。

html, body { height:100%; margin:0; }

縦にいっぱいだけど余白がある要素をつくる

縦いっぱいに広げるのはheight:100%だけで可能です。今回やりたいのは、それに加えて固定の高さの領域を用意する、というものです。

paddingとbox-sizing:border-boxを利用します。つまりheight:100%が示す値を、paddingまで含めたものとします。

<body>
  <div class="editor">Content box</div>
</body>
.editor {
  box-sizing: border-box;
  height: 100%;
  padding-top: 30px;
}

box-sizing:content-box(初期値)の場合の領域

box-sizing:border-boxの場合の領域

下部領域も

同様に下方向にもpaddingを追加します。

デモ

こんな感じになりました。

実行画面を別ウィンドウで開いて、ウィンドウサイズを変えてみてください。

編集画面的なもの。

縦に伸ばすと、中央部分だけが伸びる。

関連