7

同じ背景画像 [svg] を持つ 2 つの中央の div を使用して、中央から画像にフェードインする CSS アニメーションを作成し、それらの幅と背景位置をアニメーション化しようとしています。問題は、クロムでは、ひどいジッターの問題があることです (おそらく、クロムがアニメーションのステップを同時に行うのではなく、循環しているためでしょうか?)

jsfiddle は次のとおりです: http://jsfiddle.net/evankford/s2uRV/4/、左側のジッターの問題を確認できます (幅のアニメーションと背景位置のアニメーションが同時に行われます)。

関連するコード（サイトの残り物で申し訳ありません）

HTML:

    <div class="underheader-wrapper uhw-title">
       <div class="underheader uhleft undertitle">&nbsp;</div>
       <div class="underheader uhright undertitle">&nbsp;</div>
    </div>

そしてCSS：

   .undertitle {
-webkit-backface-visibility: hidden;
 -webkit-transform: translateZ(0);
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg);
}

.underheader-wrapper {
position: relative;
margin:  auto;
width:320px;
height:100px;
}

.underheader {
-webkit-backface-visibility: hidden;
position:absolute;
width: 0px;
height:100px;
opacity: 0;
background-size: 320px 60px;
background-repeat: no-repeat;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part1; -webkit-animation-name:part1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}

.uhleft {
background-position: -160px 40px;
right: 160px;
-webkit-backface-visibility: hidden;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part2; -webkit-animation-name:part2;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards}

.uhright {
background-position: -160px 40px;
left: 160px;}

@-webkit-keyframes part1 {
from {
    width: 0px;
    opacity: 0;
}
to {
    width: 160px;
    opacity: 1;
}}

@-webkit-keyframes part2 {
from {
    background-position:-160px 40px;
    width: 0px;

    opacity: 0;
}
to {
    width: 160px;
    background-position: 0px 40px;
    opacity: 1;
}}

@-moz-keyframes part1 {
from {
    width: 0px;
    opacity: 0;
}
to {
    width: 160px;
    opacity: 1;
}}

@-moz-keyframes part2 {
from {
    background-position:-160px 40px;
    width: 0px;
    opacity: 0;
}
to {
    background-position: 0px 40px;
    width: 160px;
    opacity: 1;
}}

私はこのジッターで立ち往生していますか? 私はすでに JQuery バージョンを実行しており、CSS の方がクリーンでスムーズであると言っている人を見つけましたが、それでもジッターは発生します。

4

2 に答える 2

0

Chrome で見られる遅延は で与えられ-webkit-animation-delay:3s;ます。に変更する-webkit-animation-delay:0s;と、すぐにフェードインが開始されることがわかります。

于 2013-11-01T23:22:38.273 に答える