cssアニメーションがカクカクするのを防ぐ方法

CSS
この記事は約2分で読めます。
スポンサーリンク

CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介!

「will-change」でGPUを使って高速処理

「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる。ページに「will-change」を多用すると他の処理が遅くなるのでちょっと注意!
また「will-change」はIE11には対応しておらずIE11をサポートする場合は、別のプロパティを書く必要が出てくる。

CSS

// アニメーションする要素
.anime{
  // 動かすプロパティが一つだけの時
  will-change: transform;
  // 複数指定する場合は間に「 , 」
  will-change: top, left, opacity, margin, padding, width, height, transform;
}

「transform: translate3d(0,0,0)」でGPUを使って高速処理

ページ内の要素どれかに「transform: translate3d(0,0,0)」を書けば「重たい処理が行きますよ~」とブラウザに伝えてくれる。「will-change」と似ているが、「will-change」は特定プロパティだけを処理するのに対して「transform: translate3d(0,0,0)」はアニメーションにフルパワーを使うので、複数のアニメーションを行う際に他の処理がどうしても遅くなってしまう。

CSS

// ページ内にある要素
body{
  // ページ内のどんなアニメーションにも対応
  transform: translate3d(0,0,0);
}

「backface-visibility: hidden」を使って背面を消すことで処理を軽くする

「backface-visibility: hidden」は、上の2つとは違い要素の背面の描画を無くすことで処理の多くをアニメーションに向けられる。

CSS

// アニメーションする要素
.anime{
  // 見えない部分だけを消す
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: .4s anime1;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました