CODEWITHSUNDEEP
csscss-animations
darkchampionz
darkchampionz

Reputation: 1224

CSS - Typewriter effect with text always in the center

So, I found the following example on the net and it works fine, except one fact I'd like to add. The left letter always is moving and centered as the typewriter effect applies but I'd like my text to always be centered and have its letters appear from left to right. How can I add this?

/* GLOBAL STYLES */

body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}


/* DEMO-SPECIFIC STYLES */

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

Upvotes: 2

Views: 2182

Answers (1)

a stone arachnid
a stone arachnid

Reputation: 1278

Set margin-left to 0 instead of auto.

/* GLOBAL STYLES */

body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}


/* DEMO-SPECIFIC STYLES */

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0;
  margin-right: auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

Upvotes: 3

Related Questions