Ben Tinner Ben Tinner - 3 months ago 14
CSS Question

How to not stack but animate all the way to the right

So here is my code:



body {
font-size: initial;
line-height: initial;
}
@-webkit-keyframes slide {
from {
margin-left: 0%;
}
to {
margin-left: 30%;
}
}
@-webkit-keyframes turn {
0% {
-webkit-transform: rotate(30deg);
}
20% {
-webkit-transform: rotate(60deg);
}
60% {
-webkit-transform: rotate(30deg);
}
80% {
-webkit-transform: rotate(30deg);
}
100% {
-webkit-transform: rotate(30deg);
}
}
.char {
display: inline-block;
-webkit-animation-name: slide, turn;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: one;
-webkit-animation-direction: alternate;
text-align: center;
font-size: 2.5em;
font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet">
</head>

<body>
<div>
<div>
<span class="char">I</span>
<span class="char"> </span>
<span class="char">s</span>
<span class="char">h</span>
<span class="char">o</span>
<span class="char">u</span>
<span class="char">l</span>
<span class="char">d</span>
<span class="char"> </span>
<span class="char">n</span>
<span class="char">o</span>
<span class="char">t</span>
<span class="char"> </span>
<span class="char">s</span>
<span class="char">t</span>
<span class="char">a</span>
<span class="char">c</span>
<span class="char">k</span>
<span class="char">.</span>
</div>
</div>
</body>

</html>





As you can see, I do not want the text to stack up but instead, I want it to fly out of the screen. I tried adding
overflow: hidden
in the
body
, but it did not work.

Is there a solution to this problem?

Answer

You need white-space: nowrap; on the parent:

body {
  font-size: initial;
  line-height: initial;
}
@-webkit-keyframes slide {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: 30%;
  }
}
@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotate(30deg);
  }
  20% {
    -webkit-transform: rotate(60deg);
  }
  60% {
    -webkit-transform: rotate(30deg);
  }
  80% {
    -webkit-transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
  }
}
.char-container {
  white-space: nowrap;
}
.char {
  display: inline-block;
  -webkit-animation-name: slide, turn;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: one;
  -webkit-animation-direction: alternate;
  text-align: center;
  font-size: 2.5em;
  font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
  <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet">
</head>

<body>
  <div>
    <div class="char-container">
      <span class="char">I</span>
      <span class="char"> </span>
      <span class="char">s</span>
      <span class="char">h</span>
      <span class="char">o</span>
      <span class="char">u</span>
      <span class="char">l</span>
      <span class="char">d</span>
      <span class="char"> </span>
      <span class="char">n</span>
      <span class="char">o</span>
      <span class="char">t</span>
      <span class="char"> </span>
      <span class="char">s</span>
      <span class="char">t</span>
      <span class="char">a</span>
      <span class="char">c</span>
      <span class="char">k</span>
      <span class="char">.</span>
    </div>
  </div>
</body>

</html>

Because <span> tags are rendered as "inline", the text is just flowing according to normal text flow rules. Using this CSS property tells the browser to prevent all text/inline wrapping, which keeps all your spans on the same line.