2
Я использую анимацию CSS, которая исчезает в некоторых элементах при загрузке страницы. Когда анимация завершена, текст «всплывает» и становится толще, чем я хочу.Текст «попс» толще в Chrome после завершения анимации CSS
Чтобы добавить к моей путанице, это только происходит, когда текст является определенным оттенком красного.
Выполните фрагмент кода ниже, чтобы увидеть его в действии. Обратите внимание, что только красный заголовок, кажется, обладает этим эффектом «popping».
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>Почему это происходит, и что более важно, как я могу остановить это вообще происходит?