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

我对CSS3动画有点陌生，希望任何人都能帮助我认识到这一点

我有一个有文字的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);
  }
}

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

谢谢你的帮助！ 卡拉

见此处

我在动画中使用了：

width:0%

来隐藏文本，并在文本的初始状态中添加了

whitespace:nowrap

，因此它不会出现在两行上，因为

width:0%

和添加了

overflow:hidden

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

css:

编辑您可以使用

伪元素

如

:before

和

:before

等，但只有在文本下方有背景色时才可以使用。就像这个例子中的红色

请参见此处：

css:

请参见此处

我在动画中使用了：

width:0%

来隐藏文本，并在文本的初始状态中添加了

whitespace:nowrap

，因此它不会出现在两行上，因为

width:0%

和添加了

overflow:hidden

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

css:

编辑您可以使用

伪元素

如

:before

和

:before

等，但只有在文本下方有背景色时才可以使用。就像这个例子中的红色

请参见此处：

css:

---

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

---

谢谢大家的意见

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

---

谢谢大家的意见

你想要什么样的动画？淡入？一种类型的动画？有什么动静吗？对不起，我很难用英语来描述。我希望文本从文本的中心显示。就像从中间滑动而不缩放文本一样。没有褪色，没有类型。@CaraMar检查我下面的答案。让我知道它是否有帮助你想要什么样的动画？淡入？一种类型的动画？有什么动静吗？对不起，我很难用英语来描述。我希望文本从文本的中心显示。就像从中间滑动而不缩放文本一样。没有褪色，没有类型。@CaraMar检查我下面的答案。让我知道它是否有帮助史米海，这是一个伟大的想法！不幸的是，文本没有固定在中间。它不应该移动。我通过剪辑路径实现了这一点，因为可能没有更简单的方法。我希望能有一个现成的css转换。但是谢谢你的帮助！用另一个解决方案编辑了我的答案，但对我来说，这是一个好主意！不幸的是，文本没有固定在中间。它不应该移动。我通过剪辑路径实现了这一点，因为可能没有更简单的方法。我希望能有一个现成的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%;

  }
}

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

.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);
  }
}