web-dev-qa-db-ja.com

ChromeでのぎくしゃくしたCSS変換遷移

背景画像にCSS3変換を使用して、ホバー時に拡大します。

Opera、Safari、Firefoxの最新のブラウザーでテストし、快適に動作しますが、Chromeでは移行が非常にぎくしゃくしています。

Heresはリンクです。ソーシャルアイコンの上にカーソルを置くと、意味がわかります。 http://www.media-flare.com/pins/ -ブラウザのサイズをモバイルに変更すると気づきましたビュー、それは悪化します。

私はここでjsfiddleバージョンを作成し、見づらいので移行を遅くしました。

http://jsfiddle.net/wsgfz/1/ -これはchromeとfirefox、safariとoperaではスムーズです。

移行をスムーズにするためにできることはありますか？

Jsfiddleを表示できない場合のコードは次のとおりです

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook, .twit, .tmblr, .pntrst, .insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s ease;
 }

 .fbook {background-position: 0 0}
 .twit {background-position: -78px 0}
 .tmblr {background-position: -156px 0}
 .pntrst {background-position: -232px 0}
 .insta {background-position: -310px 0}

.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
 }
<ul class="social">
  <li><a href="" class="fbook">Facebook</a></li>
  <li><a href="" class="twit">Twitter</a></li>
  <li><a href="" class="tmblr">Tumbler</a></li>
  <li><a href="" class="pntrst">Pinterest</a></li>
  <li><a href="" class="insta">Instagram</a></li>
  <li><a href="" class="rss">RSS</a></li>
</ul>
css3css-transitionscss-transforms
23
Adam

変換は、Chromeの移行よりもうまく機能するようです。これを試して：

.social {
  position: relative;
  list-style: none;
}
.social > li > a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
}
.social > li > a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
}
.fbook,
.twit,
.tmblr,
.pntrst,
.insta {
  background: url(http://placehold.it/350x150) center center;
  width: 78px;
  height: 90px;
  background-size: cover;
  float: left;
  margin: 30px;
  -webkit-transform: translate(0px, 0);
  -webkit-transition: -webkit-transform 0.8s ease;
  -moz-transform: translate(0px, 0);
  -moz-transition: -moz-transform 0.8s ease;
  transform: translate(0px, 0);
  transition: -webkit-transform 0.8s ease;
}
.fbook {
  background-position: 0 0
}
.twit {
  background-position: -78px 0
}
.tmblr {
  background-position: -156px 0
}
.pntrst {
  background-position: -232px 0
}
.insta {
  background-position: -310px 0
}
.fbook:hover,
.twit:hover,
.tmblr:hover,
.pntrst:hover,
.insta:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
}
<ul class="social">
  <li><a href="" class="fbook">Facebook</a>
  </li>
  <li><a href="" class="twit">Twitter</a>
  </li>
  <li><a href="" class="tmblr">Tumbler</a>
  </li>
  <li><a href="" class="pntrst">Pinterest</a>
  </li>
  <li><a href="" class="insta">Instagram</a>
  </li>
  <li><a href="" class="rss">RSS</a>
  </li>
</ul>

1つのクイックマウスイン/アウトでのちらつき効果もなくなります。

21
user1467267

2017年に更新

@Matt Coughlinの投稿に応えて、アニメーションをネイティブでサポートするブラウザーは、独自のスレッドでCSSおよびJSアニメーションをレンダリングします....

CSSベースのアニメーション、およびネイティブでサポートされているWebアニメーションは、通常「コンポジタースレッド」と呼ばれるスレッドで処理されます。これは、スタイリング、レイアウト、ペイント、およびJavaScriptが実行されるブラウザーの「メインスレッド」とは異なります。これは、ブラウザがメインスレッドで高価なタスクを実行している場合、これらのアニメーションが中断されることなく継続できることを意味します。

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

この開発者ドキュメントは、@ user1467267から現在受け入れられている回答もサポートしています...

可能な場合は、レイアウトまたはペイントをトリガーするプロパティをアニメーション化しないでください。最近のほとんどのブラウザでは、これはアニメーションをopacityまたはtransformに制限することを意味します。どちらもブラウザが高度に最適化できます。アニメーションがJavaScriptとCSSのどちらで処理されるかは関係ありません。

このドキュメントでは、アニメーション化するプロパティにwill-changeプロパティの使用を実装することも提案しているため、ブラウザはこれらのプロパティに対して追加の最適化を実行できます。私の個人的な経験では、これはchrome不透明度と変換の場合のみ顕著です。

element{
  will-change: transform, opacity;
}
17
Zze

基本的な問題

アニメーションの実行速度が遅く、不均一に見える場合、常に存在するブラウザの制限が明らかになります。

ブラウザには、アニメーションをレンダリングするための専用のスレッドがありません。アニメーションは、UIイベントなどの他のブラウザーアクティビティと競合する必要があります。また、ブラウザはコンピュータ上で実行されている他のソフトウェアと競合することもあります。さらに、ブラウザで利用できるハードウェアアクセラレーションは、おそらくある程度制限されています。

イージングを使用したアニメーションは、アニメーションの開始および/または終了時にさらに遅くなり、アニメーションの自然な不均一性がさらに明白になります。

ソリューション

むらが目立たないようにするための最も簡単な解決策は、アニメーションの速度を上げ、オプションでイージングの使用を削除または減らすことです。最初と最後でそれほど遅くならないタイプのイージングを使用することが可能かもしれません。

今後は、WebGLのハードウェアアクセラレーション（3Dコンテキストを使用したHTML5キャンバスタグ）を使用することで問題を軽減できます。ブラウザやデバイスでハードウェアアクセラレーションがより一般的になり、より適切にサポートされるようになると、古いFlashアニメーションと同じくらいスムーズに実行される複雑なアニメーションを作成できるようになります。

13
Matt Coughlin