Here is the code I have:
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>Instead of stacking up, I want the text to fly out of the screen. I attempted to add overflow: hidden in the body, but it didn't have the desired effect.
Do you know of a solution for this issue?