1

CSS3アニメーションが、アニメーションが適用されていない要素であっても、ページ上のすべてのテキストの重みに影響を与えるという奇妙な表示バグが発生しています。なぜこれが起こっているのか考えていますか？

（このページを参照できます：https ：//gtrot.com/chicago ）

青いヘッダーの中央にあるロゴにカーソルを合わせると、ロゴが揺れることに注意してください。これを行うには、ホバーに「アニメーション」と「ウォブル」の2つのクラスを適用します。

@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-5%) rotate(-4deg); }
    30% { transform: translateX(4%) rotate(3deg); }
    45% { transform: translateX(-3%) rotate(-1deg); }
    60% { transform: translateX(1%) rotate(1deg); }
    75% { transform: translateX(-1%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

と

.animated_slow {    
    -webkit-animation-duration: .8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}

よろしくお願いします、マット

4

1 に答える 1

0

これを html スタイルに追加すると、問題が解決するはずです。

html {
    -webkit-font-smoothing: antialiased;
}
于 2012-11-21T20:40:52.940 に答える