29

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

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

ここにリンクがあります。ソーシャルアイコンにカーソルを合わせると、意味がわかります。http://www.media-flare.com/pins/-ブラウザのサイズをモバイルビューに縮小すると、さらに悪化することに気づきました。

ここでjsfiddleバージョンを実行しましたが、見づらいため、移行を遅くしました。

http://jsfiddle.net/wsgfz/1/-これは、クロムとFirefoxではぎくしゃくしていて、サファリとオペラでは滑らかに見えます。

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

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>

4

3 に答える 3

24

2017年の更新

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

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

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

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

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

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

element{
  will-change: transform, opacity;
}
于 2017-02-15T04:04:41.803 に答える
22

変換は、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つのクイックマウスイン/アウトのちらつき効果もなくなりました。

于 2013-03-25T00:18:26.120 に答える
16

基本的な問題

アニメーションの実行が遅く、不均一に見える場合、それは常にそこにあるブラウザの制限を明らかにしているだけです。

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

イージングのあるアニメーションは、アニメーションの開始時や終了時にさらに遅く実行されます。これにより、アニメーションの自然な不均一性がさらに明確になります。

ソリューション

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

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

于 2013-03-25T02:08:49.300 に答える