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>왜 이런 일이 더 중요한 일이, 그리고 않습니다, 어떻게 전부 이런 일이 발생 중지 할 수 있습니다?