从CSS动画中心显示文本 [英] Reveal Text from center with CSS Animation

问题描述

我有一个带有文字的div。我不知道如何使用CSS3动画，并且希望有人能帮我实现这一点。我想从中心揭示这个div。它看起来很简单，但直到现在我还没有找到实现它的完美方式。

是否需要使用

  .text-div {
 clip-path：插入（右上角左下）; 
 animate：revealText 3s; 
} 
 
 @keyframes revealText {
 0％{
 clip-path：inset（top right left left）; 
}，
 100％{
 clip-path：inset（右上角左下角）; 
} 
} 
  

或者你会提出另一种解决方法吗？ / p>

感谢您的帮助！
Cara

解决方案

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

JSFiddle here

  .text-div {
位置：绝对; 
 top：45％; 
 right：0; 
剩下：0; 
 margin：0 auto; 
 text-align：center; 
颜色：白色; 
 clip-path：inset（0px 50％0px 50％）; 
 -webkit-clip-path：inset（0px 50％0px 50％）; 
动画：揭示文字3s; 
} 
 .content {
 background：red; 
 height：200px; 
 width：200px; 
职位：亲属; 
} 
 @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）; 
 
 
 $ / code $ 
 
 
 
感谢大家的输入！
 
I'm kind of new to CSS3 Animations and hope anybody out there could help me realising this.

I'm having a div with text in it. I would like to reveal this div from the center. It looks kind of simple, but until now I didn't find the perfect way to realise it. 

Do I need to use
.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);
  }
}
or would you suggest another way to solve this?





Thanks for your help!
Cara
解决方案
That's how I realised it in the end. It appears to me, that until now, there is no easier way to do this.

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);
  }
}
Thanks everybody for input!

                        
这篇关于从CSS动画中心显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！