背景の画像に対して中心からのテキストを公開

Question

私は背景画像を持つ要素に対して中心からのテキストを明らかにしようとしています。アニメーションの背景を単色にすると、アニメーションが完了するまで、その単色がテキストの周りに表示されます。同じ背景イメージをテキストの背後にある要素の背後に置くと、同じイメージの別のバージョンがテキストの周りに表示されます。助言がありますか？

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% 
    } 
} 

Answer 1

私の頭の中で私に起こった最初のものです。 1つは左にスライドし、もう1つは右にスライドします。正味の効果は、要素が中心に保持していることで、次第に

#the-wall { 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-color: black; 
 
} 
 

 
.showheadctn1, 
 
.showheadctn2 { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.showheadctn1 { 
 
    transform: translateX(50%); 
 
} 
 

 
.showheadctn2 { 
 
    transform: translateX(-100%); 
 
} 
 

 
.showhead { 
 
    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; 
 
    width: 100%; 
 
    transform: translateX(50%); 
 
} 
 

 
.showheadctn1, 
 
.showheadctn2, 
 
.showhead { 
 
    animation: revealText 4s infinite; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes revealText { 
 
    0% {} 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
}

<div class="container-big" id="the-wall"> 
 
    <div class="chapter-hed"> 
 
    <h5>PART 1</h5> 
 
    <div class="showheadctn1"> 
 
     <div class="showheadctn2"> 
 
     <h4 class="showhead">My heading</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を明らかにしています

Answer 2

あなたは3つの層を作ることができます。 イメージの下端。 テキストの間に。 正面が再び画像ですが、今回は半分に分割されています。

あなたは、あなたが今持っていたのと同じアニメーションを行います。

確かに（論理的に、3層目）がより適切な解決策ですが、それは私があなたのクラスの2人のラッパーを追加した