Reveal Text from center with CSS Animation - html

Question

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

Answer 1

see here jsfiddle
i used : width:0% on the animation to hide the text , and added white-space:nowrap to initial state of the text so it doesn't go on two separate lines because of the width:0% and added overflow:hidden
play around with the css i gave you , remove some of the things to see how they work
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%;
}
}
EDIT you could use pseudo-elements like :before and :after , but this only if you have a background color underneath the text . like in this example red
see here : jsfiddle
css :
.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%
}
}

Answer 2

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!