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*/
}

animation-fill-mode 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;
  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>

使用CSS动画从中心显示文本并在结尾处保持文本可见

1 个答案: