CSS Transitions Module Level 3ではCSSプロパティの数値を変化させ、その結果アニメーションなどの効果を表現することができますが、iOSなどの非力なモバイル端末ではどうしてもカクカクしてしまう場合が多いです。

特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。

iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。

基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発生しているようで、GPUアクセラレーターを利用したい場合は、常に3D処理をさせる（常にONにしておく）のがよさそうです。

3D処理のスイッチ（便宜上スイッチと呼びますが）については@Takazudoさんのハマログに書かれてる以下の記述でも出来るのですが

target { -webkit-transform: translate3d(0, 0, 0); }

iOSでCSSアニメーション使うとなんかチカチカする

transformプロパティを使いたくない場合もあるので、transformプロパティを利用しない方法として

target { -webkit-transform-style: preserve-3d; }

このようにtransform-styleにpreserve-3dを指定すると、その要素のアニメーション処理にはGPUアクセラレーターが利用されるようになります。

指摘もらったので追記、ちょっとわかりにくかったかも

transform-style: preserve-3d はGPUアクセラレーターをONにするためのプロパティではありません。3D処理を行うと指定すると、iOSでGPUアクセラレーターがONになるというだけです。

http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property

CSSでフォントサイズの指定って何でしてますか？っていうのは何年も前からある話題で最近は全然見ないですけど、特にそういう議論をしたいわけじゃなくて。

僕はYUI 3のCSS Fontsを使っていますが、%指定になるので実際何pxになるのかCSSだけでは分かりにくいときもあるので、共通CSSに下記のようなコメントでpx対応テーブルを書いておくとすぐに指定できてわかりやすいと思いますが、皆さんどうしてますか？

Read more

http://macthemes.skype.com/

Mac限定なんですけど、カスタムチャットスタイルを作って応募すればMacBook AirとかiPadとかもらえるで！っていう内容です。

Read more

「CSS3でつくるローディングアイコン」っていうのを何も考えずに作ったんですけど、同じこと考える人なんかたくさんいるので、1年くらい前から色々存在してました・・・でもせっかくつくったので、もうありますけど、公開しておきます。

くるくる と ぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう！（今おもいついたから強引につかったとこだけ）

Read more

通常入力したパスワードは、アスタリスクで*****のように隠れてしまいますが、うっかりキーを押しすぎたときとか、何を打ったかわからなくなるときないですか？

いちいち全部消して、、打ちなおして、、また間違えて…よくやりますｗ

常に表示されるとセキュリティ面で不安も残るかも知れないので、チェックボックスをチェックしてるときだけ表示されるGreasemonkeyを書きました。簡単に言えばこの前書いたhintmaskのGreasemonkey版です。

それなりに使えると思うのでFirefoxの方は試しにインストールしてみてください。

Read more