css - 使用 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

将 animation-fill-mode:forwards 添加到 .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*/
}

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

.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>