CSSアニメーションを使用して中央からテキストを表示し、最後にテキストを表示し続ける

Question

私はReveal Text from center with CSS Animationのコードを使用して、中央のテキストを表示しています。 しかし、私はアニメーションが終了した後にテキストを表示したままにしたいと思います。今のところ、テキストはアニメーションの後に消えます。私はアニメーションをCSSに取り入れていないので、正しいことが何であるか分かりません。

CSS：

.text-div { 
    color:white; 
    text-align:center; 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    top:45%; 
    font-weight: bold; 
} 
.text-div:before { 
    left:0; 
} 
.text-div:after { 
    right:0; 
} 
.text-div:after,.text-div:before { 
    position:absolute; 
    content:""; 
    height:100%; 
    width:50%; 
    background:black; 
    animation: revealText 3s; 
} 

.content { 
    background:black; 
    height:200px; 
    width:200px; 
    position:relative; 
} 
@keyframes revealText { 
    0% { 
    width:50% 
    } 
    100% { 
    width:0% 
    } 
} 

HTML：

<div class="content"> 
    <div class="text-div"> 
    The subculture 
    </div> 
</div> 

Answer 1

アニメーションフィルモードのCSSプロパティがどのようにCSSを指定し、以下のように.text-div:after,.text-div:beforeに

.text-div:after,.text-div:before { 
    position:absolute; 
    content:""; 
    height:100%; 
    width:50%; 
    background:black; 
    animation: revealText 3s; 
    animation-fill-mode:forwards; /*Add this*/ 
} 

をanimation-fill-mode:forwardsを追加アニメーション sh ouldは、実行前と実行後にターゲットにスタイルを適用します。

.text-div { 
 
    color:white; 
 
    text-align:center; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top:45%; 
 
    font-weight: bold; 
 
} 
 
.text-div:before { 
 
    left:0; 
 
} 
 
.text-div:after { 
 
    right:0; 
 
} 
 
.text-div:after,.text-div:before { 
 
    position:absolute; 
 
    content:""; 
 
    height:100%; 
 
    width:50%; 
 
    background:black; 
 
    animation: revealText 3s; 
 
    animation-fill-mode:forwards; 
 
} 
 

 
.content { 
 
    background:black; 
 
    height:200px; 
 
    width:200px; 
 
    position:relative; 
 
} 
 
@keyframes revealText { 
 
    0% { 
 
    width:50% 
 
    } 
 
    100% { 
 
    width:0% 
 
    } 
 
}

<div class="content"> 
 
    <div class="text-div"> 
 
    The subculture 
 
    </div> 
 
</div>