will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた — un-Tech
ごきげんよう。フーミンです。 最近のサイトはいたるところにアニメーションする要素が増えてきましたね。 制作ツールや学習環境が充実してきたことによって、実装が簡単になってきたことも要因の一つでしょうか。 実装が簡単になった分、 ｢アニメーション簡単で楽しい！どんどんアニメーションさせてイケてるサイト作るぜ〜！」 と、なにも考えずに何でもかんでもアニメーションさせていたら、 「なんか重いなぁ・・・動きもカクカクしてるなぁ・・・」 なんてことになったことありませんか？ 今回は、もっさり重くなってしまったサイトのパフォーマンスを改善するために、原因の追求と対策について、簡単に説明していこうと思います。 パフォーマンスの改善について まず、ひとことに「パフォーマンスの改善」といっても、 ネットワークパフォーマンスの改善（HTTPリクエストを減らす など） JavaScript & CSSパフォーマン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
