スマホサイトにサイト内検索をつけたいと思っています。
検索ボタンを押すと検索窓が伸びて文字が入力できるようになる、というデザインにしたいのですが、下記のサイトを参考にcssのみで実装してみたところ、動きがカクカクしていました。
スムーズに動かしたいのですが、他に良い方法はないでしょうか。
http://webdesignerwall.com/tutorials/expandable-mobile-search-form
そもそも、スマホサイトでこういうデザインはよくないのかなあとも思い始めましたが…
みんなの回答 6 件
同時に動かす装飾を減らしてみたら？あと、動きの大きさに対して、Durationが長いとか。アルファを伴う処理は、アニメーションが重なると重くなるよ。
それはJSでやっても同じようなことにはなると思う。
CSSアニメーションはGPUアクセラレーションを使用しているため描画能力が高く、検証機種がよほどスペックが低くない限り(適切にコーディングできていれば)カクつくことはないはずです。
むしろCSS3に対応しているスマホサイトだからこそできるエフェクトだと思います。
あたしこのタイプの検索嫌い。ふつうにしててよ
CSSアニメーション=GPUアクセラレーションの使用ではないので、GPUが動く書き方をしてみて。
transitionのallを必要プロパティのみにする。
transitionのショートハンドを個別に設定する。
translateZ(0)とかでGPUを有効にする（iOSのみかな？)
これで改善しなかったらハードの問題かも。
っていうか、アニメーションしなれければならない理由を述べよ
関連するトピックス