Any idea on how to make this text CSS animation responsive on small screens?

Question

I have a text slidein animation I am working with but the text does not stack up on small screens. Instead it runs off the screen. I'd like to have both sentences on the same line on large and extra large screens and it to stack on smaller screens. So far I have it stacked on no matter the size, looks fine on medium and up, but the text runs off the screen on small screens. Any tips on what I should be doing?

Screenshots: Full screen Small screen

body {
  text-align: center;
  background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color: #555;
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
}

.intro {
  display: inline-block;
  overflow: hidden;
  white-space: normal;
}

.intro:first-of-type {
  animation: showup 7s infinite;
}

.intro~.intro {
  width: 0px;
  animation: reveal 7s infinite;
  white-space: normal;
}

.intro~.intro span {
  margin-left: -355px;
  animation: slidein 7s infinite;
  white-space: normal;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 650px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 650px;
  }
}

p {
  font-size: 12px;
  color: #999;
}

<div class="container-fluid">
  <div class="intro">Hello.</div>
  <div class="intro col-xs-12">
    <span>My name is Nate and I need this responsive</span>
  </div>
</div>

Answer 1

After fiddling with it a bit, I don't think you can get the effect you want by just defining your CSS animations just right. Your best bet is to set different behavior for different screen widths, using @media rules:

@media screen and (max-width: 649px) {
    /* Rules for small screens */
}
@media screen and (min-width: 650px) and (max-width: 999px) {
    /* Rules for medium screens */
}
@media screen and (min-width: 1000px) {
    /* Rules for large screens */
}