CODEWITHSUNDEEP
csscss-animations
darkchampionz
darkchampionz

Reputation: 1224

CSS - Make centered text appear like a typewriter

I am trying to make a centered, one-row'd text have its letters appear one by one with a cursor on its right. I use this code below but it has some issues I can't fix yet:

1) The text is not centered at first although I use text-align: center but is on the left and then goes to the center

2) The text is not appearing on one row at first but in multiple rows.

.header {
  background-color: black;
  padding: 2%;
  text-align: center;
}
.test {
  color: white;
  overflow: hidden;
  font-size:25px;
  border-right:2px solid #7CDD26;
  animation-delay: 2s;
  animation-duration: 12s;
  animation-fill-mode: both;
  animation-name: spin1;
}
@-webkit-keyframes spin1 {
  0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
}
<div class="header">
  <div class="test">This is a test.</div>
</div>

Upvotes: 0

Views: 182

Answers (1)

A. Meshu
A. Meshu

Reputation: 4148

For (a) - Since you set the width property to block-level element (div) you need to margin to auto in order to center the element. text-align property centers the text inside the container not the container itself.

As for (b) - you already set overflow property, but since you haven't set height, the initial value is auto.

So your code can be adjust to that:

.header {
  background-color: black;
  padding: 2%;
  text-align: center;
}
.test {
  color: white;
  overflow: hidden;
  font-size:25px;
  border-right:2px solid #7CDD26;
  animation-delay: 2s;
  animation-duration: 12s;
  animation-fill-mode: both;
  animation-name: spin1;
margin: auto;
height: 25px;
}
@-webkit-keyframes spin1 { 
  from {width:0px;border-right:0px;}
  to {width:400px;border-right:2px solid #7CDD26;}
}
<div class="header">
  <div class="test">This is a test.</div>
</div>

Hope that helps!

Upvotes: 1

Related Questions