CSS3 animation acting differently in Chrome - css

Question

I'm having issues in Chrome browser getting my animations to work correctly. Upon page load the first span in rw-words-1 is always off in its positioning for some reason. On the website when the page loads, it is supposed to read like...
Building "some text 1"
designed to "some word 1"
and then the words i've placed in quotes should fade out and the new words pop in like...
Building "some text 2"
designed to "some word 2"
etc, etc based on the html file below. The problem is the 2nd and 3rd span pop in the correct positioning, but the 1st span is always jumbled & overlapping the "designed to" text for some reason. It works fine however in Firefox / Safari. Any help would be much appreciated.
FRONT-END HTML
<div class="slogan">
<h1 class="rw-sentence">
<span>Building</span>
<div class="rw-words rw-words-1">
<span>some text 1...</span>
<span>some text 2...</span>
<span>some text 3...</span>
</div>
<br clear="all">
<span>designed to</span>
<div class="rw-words rw-words-2">
<span>some word 1</span>
<span>some word 2</span>
<span>some word 3</span>
</div>
</h1>
<p>Some sub-slogan here</p>
</div>
CSS:
/* ------ CSS ANIMATIONS ------- */
.rw-wrapper {
width: 90%;
padding: 10px;
}
.rw-sentence{
text-align: left;
position: relative;
}
.rw-sentence span {
white-space: nowrap;
}
.rw-words {
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 0px;
}
/* -- WEIRD FIREFOX MARGIN HACK --*/
#-moz-document url-prefix() {
.rw-words.rw-words-1 span {
margin-left: 10px;
}
}
.rw-words.rw-words-2 span {
margin-left: 10px;
}
.rw-words-1 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}

Answer 1

Well...I just changed some code around & added some margins/floats & it now works in all browsers. Still not sure why chrome treated the transitions/code from my original question differently though which is pretty frustrating. If anybody knows, i'd still love to know as I'm trying to get better at design that's consistent across all browsers. thx,
.rw-words {
display: inline;
float: left;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 165px;
font-weight: 480;
}
/* -- I REMOVED THE FIREFOX MARGIN HACK --*/
.rw-words.rw-words-2 span {
margin-left: 234px;
font-weight: 480;
}