2
CSSアニメーションを使用して、ページの読み込み時に一部の要素がフェードします。アニメーションが完了すると、テキストが「ポップ」し、私が望むよりも太くなります。CSSのアニメーションが完了した後、Chromeのテキストが「ポップス」になります
私の混乱に追加するには、テキストが赤の特定の色である場合にのみ発生するようです。
下記のコードスニペットを実行して実際の動作を確認してください。赤いタイトルだけがこの「ポップ」効果を持つように見えることに注目してください。
body {
background: #000;
}
div {
background: #111;
padding: 2px 15px;
margin-bottom: 5px;
animation: fadein 2s;
}
h2 {
color: #FFF;
font-weight: normal;
font-size: 16px;
}
.white {
color: #FFF;
}
.red {
color: #fc1313;
}
.yellow {
color: #f2af2b;
}
.green {
color: #4cf22b;
}
/* FadeIn Effect */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<div>
<h2 class="white">
Some White Title
</h2>
</div>
<div>
<h2 class="red">
Some Red Title
</h2>
</div>
<div>
<h2 class="yellow">
Some Yellow Title
</h2>
</div>
<div>
<h2 class="green">
Some Green Title
</h2>
</div>これはなぜ起こるのでしょう、そしてもっと重要なのは、私は完全に起きてからこれをどのように停止することができますか？