使用CSS动画从中心显示文本

Question

我是CSS3动画的新手，希望那里的任何人都可以帮助我实现这一目标。

我有一个带文字的div。我想从中心透露这个div。它看起来很简单，但直到现在我还没有找到实现它的完美方式。

我需要使用

吗？

.text-div {
    clip-path: inset(top right bottom left);
    animate: revealText 3s;
}

@keyframes revealText {
  0% {
    clip-path: inset(top right bottom left);
  },
  100% {
    clip-path: inset(top right bottom left);
  }
}

或者你会建议另一种解决方法吗？

感谢您的帮助！ 卡拉

Answer 1

点击此处 jsfiddle

我在动画上使用width:0%来隐藏文字，并将white-space:nowrap添加到文字的初始状态，因此width:0%因此不会分为两行并添加了overflow:hidden

玩我给你的css，删除一些东西，看看它们是如何工作的

css：

.text-div {
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    animation: revealText 3s;
    color:white;
    text-align:center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top:45%;
}
.content {
  background:red;
  height:200px;
  width:200px;
  position:relative;
}
@keyframes revealText {
  0% {
    width:0%;

   }
  100% {
    width:100%;

  }
}

编辑 您可以使用pseudo-elements和:before之类的:after，但这只有在您拥有背景颜色的情况下才能使用red文字。就像在这个例子.text-div { color:white; text-align:center; position: absolute; left: 0; right: 0; margin: 0 auto; top:45%; } .text-div:before { left:0; } .text-div:after { right:0; } .text-div:after,.text-div:before { position:absolute; content:""; height:100%; width:50%; background:red; animation: revealText 3s; } .content { background:red; height:200px; width:200px; position:relative; } @keyframes revealText { 0% { width:50% } 100% { width:0% } }

中一样

请参阅此处： jsfiddle

css：

{{1}}

Answer 2

这就是我最终意识到的。在我看来，直到现在，没有更简单的方法来做到这一点。

JSFiddle here

.text-div {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  color: white;
  clip-path: inset(0px 50% 0px 50%);
  -webkit-clip-path: inset(0px 50% 0px 50%);
  animation: revealText 3s;
}
.content {
  background:red;
  height:200px;
  width:200px;
  position:relative;
}
@keyframes revealText {
  0% {
    clip-path: inset(0px 50% 0px 50%);
    -webkit-clip-path: inset(0px 50% 0px 50%);
   }
  100% {
     clip-path: inset(0px 0px 0px 0px);
     -webkit-clip-path: inset(0px 0px 0px 0px);
  }
}

感谢大家的投入！