私は背景画像を持つ要素に対して中心からのテキストを明らかにしようとしています。アニメーションの背景を単色にすると、アニメーションが完了するまで、その単色がテキストの周りに表示されます。同じ背景イメージをテキストの背後にある要素の背後に置くと、同じイメージの別のバージョンがテキストの周りに表示されます。助言がありますか?背景の画像に対して中心からのテキストを公開
HTML:
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<h4 class="showhead">My heading</h4>
</div>
</div>
CSS:
#the-wall {
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.chapter-hed h4 {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
}
.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before {
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.showhead:after, .showhead:before {
animation: revealText 4s;
animation-fill-mode:forwards;
}
@keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}