How to make CSS typewriter effect responsive?

Question

I made this CSS typewriter animation however, I'm unable to make it responsive.

The below is my code:

HTML:

<div class="animation">
    <p>CRISTIANO RONALDO</p> 
</div>

CSS:

.animation p{
  color: #D64933; 
  font-family: 'Lato', cursive;
  font-size: 50px; 
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: title 7s steps(70, end); 
  margin-bottom: 40px;

}

@keyframes title{ 
  from { width: 0; opacity: 0.0;}
  to { opacity: 1.0; } 
} 

I want the animation to start from center of the page and also be responsive. Any thoughts on how it can be achieved?

Link to CodePen

Answer 1

I'm not saying it's the best fix but at least it works (tho there is some shaking) :

/*CSS*/
.animation {
width: 100%;
text-align: center;
}

.animation p{
margin: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
color: #D64933; 
font-family: 'Lato', cursive;
font-size: 50px; 
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: title 3s steps(70, end); 
margin-bottom: 40px;

}

Answer 2

Pretty straight forward with flexbox.

wrap your animation in a container. set display to flex justify-content and align items to center

set height of body html and container to 100%

set font size to a view height so it remains responsive

body, html{
  height: 100%;
}

.container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animation p{
  color: #D64933; 
  font-family: 'Lato', cursive;
  font-size: 10vh; 
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: title 7s steps(70, end); 
  margin-bottom: 40px;

}

@keyframes title{ 
  from { width: 0; opacity: 0.0;}
  to { opacity: 1.0; } 
} 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="animation">
    <p class="text-center">CRISTIANO RONALDO</p> 
  </div>
</div>