12

cssトランジションを追加してから（最初のトランジションはホバー、2番目はアニメーション）、フォントがめちゃくちゃになっているようで、「異なって」見えます。

それは完全に奇妙で、私は何時間も探しましたが、何も見つかりませんでした。また、なぜそれが起こっているのかを正確に理解することもできません。

Firefoxでは問題ないようですが、サファリとクロームに問題があります。

http://www.simplerweb.co.uk

左下の歯車のアニメーションの下にあるものはすべて、フォントの太さが軽いように見え、ナビゲーションメニューも同じように見えます。

私はこれで完全に迷子になっています。

これがアニメーションのCSSです。

.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
 -webkit-animation-name:             backrotate; 
    -webkit-animation-duration:        13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


-moz-animation-name: backrotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;

 -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


    -moz-animation-name: rotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function:linear;
    -moz-animation-iteration-count: infinite;

}


@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

  }
  to { 
    -webkit-transform: rotate(360deg);

  }
}

@-moz-keyframes rotate {
from {

    -moz-transform: rotate(0deg);
  }
  to { 

    -moz-transform: rotate(360deg);
  }
}



@-webkit-keyframes backrotate {
    0% {

        -webkit-transform: rotate(360deg);
    }
    100% {

        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes backrotate {
    0% {
        -moz-transform: rotate(360deg);

    }
    100% {
        -moz-transform: rotate(0deg);

    }
}
4

10 に答える 10

19

私も同様の問題を抱えていたと思いますが、それを修正したのは追加でした

-webkit-font-smoothing: antialiased;

私の体にcss。何らかのアニメーションが発生すると、webkitはアニメーションを支援するためにテキストをアンチエイリアスしようとするため、最初にテキストを追加すると、テキストが変更されたり、異なって見えることを防ぎます。

于 2012-12-11T01:37:28.410 に答える
5

私も同じ問題を抱えていました。Webkitトランジションの実行中に、一部のアンカーテキストがアンチエイリアス処理されました。何度も試した結果、これは、配置され、他の要素の内側にもz-indexが配置されたz-indexを持つ要素でのみ発生することがわかりました。

#footer {
    bottom: 0;
    left: 330px;
    right: 100px;
    height: 75px;
    background-color: #231f20;
    min-width: 540px;
    min-height: 75px;
    position: fixed;
    z-index: 10;
}

私が持っているフッターの中に

#cityNav > ul > li a {
            font-size: 24px;
            text-transform: uppercase;
            position: relative;
            z-index: 110;
            line-height: 24px;
            height: 24px;
            display: block;
        }

これが私の移行です

.circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #ff0000;
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-indent: -999em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: all .2s ease-out; 
        -moz-transition: all .2s ease-out; 
        -o-transition: all .2s ease-out; 
        transition: all .2s ease-out;
    }
    .circle:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
于 2012-10-30T12:36:01.873 に答える
3

ChromeforOSXでこの問題が発生していました。使用-webkit-backface-visibility: hidden;すると問題が修正されました。

于 2014-09-16T18:33:57.677 に答える
2

私はこの問題に何度も直面し、アニメーション要素に次のcssを追加することに成功しました。

z-index: 60000;
position: relative;

効果を上げるには、z-indexとpositionの両方が必要なようです。私の場合、FontAwesomeのアニメーションスピナーで使用していました。

于 2013-07-29T10:36:31.080 に答える
1

理由はよくわかりませんが、.geartwo要素（100px x 100px）がテキストと重なっていると、明るくなっているように見えます。ロールオフすると、通常の状態に戻ります。私も、これはWebkitブラウザーでのみ気づきます。

これを修正するには、歯車widthとheightを40px（とにかく画像のサイズです。100pxx 100pxにする必要はないと思います）に設定し、それに応じて位置を変更します。

編集：私の提案の後でこれを行う必要があるかどうかはわかりませんが、少し検索した後、この関連する議論を見つけました。

于 2012-04-19T01:24:47.313 に答える
1

表示されているのは、Webkitがテキストをアンチエイリアス処理していることです。これは、テキストがベクトルではなくテクスチャとして扱われているためです。変換を使用しないか、タイプの代わりに画像を提供するためにテキスト置換を使用する以外に、できることはあまりありません。

Webkitエイリアシングに関連するスレッドはいくつかありますが、個人的には、型を型として保持し、変換を使用することはあまりできませんでした。

于 2012-04-19T02:06:27.463 に答える
1

上記のように、-webkit-font-smoothing: antialiased;デスクトップSafariで動作します。-webkit-backface-visibility: hidden;ただし、iOSでは、これを修正するためにを使用する必要があります。

于 2014-07-07T13:41:28.340 に答える
1

-webkit-backface-visibility: hidden;部分的な解決策ですが、特にスムージング/AAを有効にしている場合は、テキストの表示が実際に台無しになります。このバグも厄介です。これは、transformプロパティを使用している場合にのみ発生するためです。

隔月でこのトピックを散発的に訪問して約2年後、私は修正を見つけました。position:relativeアニメーション化されているcss要素にを追加する必要があります。ただし、落とし穴があります。歪みが見られる要素よりも大きいか小さい値を指定する必要がありz-indexます。これで100％修正されます。

トピックには「明確な」答えがないので、この答えが私が何年も乗っていたのと同じボートに乗っていた誰かに役立つことを願っています。

于 2016-03-03T07:42:51.460 に答える
-1

iOS8の場合、変換のちらつきを取り除くことに成功した唯一の方法は、追加することでした。

body * { -webkit-transform: translate3d(0, 0, 0); }

私のスタイルシートに。

于 2015-01-22T15:36:57.040 に答える
-2

ちらつきが見られる要素にこのCSSルールを追加するだけです。

 -webkit-transform-style: preserve-3d;

以上です。

于 2015-10-13T10:44:50.050 に答える