css3 - How to float a word next to animated text -

i'm new animating text in css3, , have 2 problems can't quite figure out.

problem 1: i've been trying float regular word next animated text it's in 1 sentence. animated word close end of sentence , take require space depending on length of word.

janie lovely girl because (animated text) , cool.

problem 2: second issue started when added words total of 12 animated words. caused looping issue words appearing on top of each other i'm not sure change in terms of keyframes make words loop how they're supposed to.

any or push in right direction extremely helpful @ point. here's fiddle

thanks in advanced!

html:

<section class="wrapper">    <h2 class="sentence">janie lovely girl because     <div class="slidingvertical">     <span>amazing</span>     <span>beautiful</span>     <span>cute</span>     <span>honest</span>     <span>cool</span>     <span>brave</span>     <span>wild</span>     <span>interesting</span>     <span>local</span>     <span>sexy</span>     <span>intelligent</span>     <span>exotic</span>     </div>   <p>   , cool.   </p>   </h2>   </section> 

css:

/*heading1*/ h1{     color: #fff;     font-size: 44px;     margin-top: 40px;     text-align: center; } /*sentence*/ .sentence{      color: #222;      font-size: 30px;      text-align: left; } /*wrapper*/ .wrapper{     font-family: 'raleway', sans-serif;     margin: 100px auto;     padding: 40px 40px;     position: relative;     width: 70%; }  /*vertical sliding*/ .slidingvertical{     display: inline;     text-indent: 8px; } .slidingvertical span{     animation: toptobottom 10.5s linear infinite 0s;     -ms-animation: toptobottom 10.5s linear infinite 0s;     -webkit-animation: toptobottom 10.5s linear infinite 0s;     color: #000;     opacity: 0;     overflow: hidden;     position: absolute; } .slidingvertical span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .slidingvertical span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .slidingvertical span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .slidingvertical span:nth-child(5){     animation-delay: 12s;     -ms-animation-delay: 12s;     -webkit-animation-delay: 12s; }  /*toptobottom animation*/ @-moz-keyframes toptobottom{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: translatey(-50px); }     10% { opacity: 1; -moz-transform: translatey(0px); }     25% { opacity: 1; -moz-transform: translatey(0px); }     30% { opacity: 0; -moz-transform: translatey(50px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes toptobottom{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: translatey(-50px); }     10% { opacity: 1; -webkit-transform: translatey(0px); }     25% { opacity: 1; -webkit-transform: translatey(0px); }     30% { opacity: 0; -webkit-transform: translatey(50px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes toptobottom{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: translatey(-50px); }     10% { opacity: 1; -ms-transform: translatey(0px); }     25% { opacity: 1; -ms-transform: translatey(0px); }     30% { opacity: 0; -ms-transform: translatey(50px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*horizontal sliding*/ .slidinghorizontal{     display: inline;     text-indent: 8px; } .slidinghorizontal span{     animation: lefttoright 12.5s linear infinite 0s;     -ms-animation: lefttoright 12.5s linear infinite 0s;     -webkit-animation: lefttoright 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .slidinghorizontal span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .slidinghorizontal span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .slidinghorizontal span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .slidinghorizontal span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*lefttoright animation*/ @-moz-keyframes lefttoright{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: translatex(-50px); }     10% { opacity: 1; -moz-transform: translatex(0px); }     25% { opacity: 1; -moz-transform: translatex(0px); }     30% { opacity: 0; -moz-transform: translatex(50px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes lefttoright{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: translatex(-50px); }     10% { opacity: 1; -webkit-transform: translatex(0px); }     25% { opacity: 1; -webkit-transform: translatex(0px); }     30% { opacity: 0; -webkit-transform: translatex(50px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes lefttoright{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: translatex(-50px); }     10% { opacity: 1; -ms-transform: translatex(0px); }     25% { opacity: 1; -ms-transform: translatex(0px); }     30% { opacity: 0; -ms-transform: translatex(50px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*fadein*/ .fadein{     display: inline;     text-indent: 8px; } .fadein span{     animation: fadeeffect 12.5s linear infinite 0s;     -ms-animation: fadeeffect 12.5s linear infinite 0s;     -webkit-animation: fadeeffect 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .fadein span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .fadein span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .fadein span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .fadein span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*fadein animation*/ @-moz-keyframes fadeeffect{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: translatey(0px); }     10% { opacity: 1; -moz-transform: translatey(0px); }     25% { opacity: 1; -moz-transform: translatey(0px); }     30% { opacity: 0; -moz-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes fadeeffect{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: translatey(0px); }     10% { opacity: 1; -webkit-transform: translatey(0px); }     25% { opacity: 1; -webkit-transform: translatey(0px); }     30% { opacity: 0; -webkit-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes fadeeffect{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: translatey(0px); }     10% { opacity: 1; -ms-transform: translatey(0px); }     25% { opacity: 1; -ms-transform: translatey(0px); }     30% { opacity: 0; -ms-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*vertical flip*/ .verticalflip{     display: inline;     text-indent: 8px; } .verticalflip span{     animation: vertical 12.5s linear infinite 0s;     -ms-animation: vertical 12.5s linear infinite 0s;     -webkit-animation: vertical 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .verticalflip span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .verticalflip span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .verticalflip span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .verticalflip span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*vertical flip animation*/ @-moz-keyframes vertical{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotatex(180deg); }     10% { opacity: 1; -moz-transform: translatey(0px); }     25% { opacity: 1; -moz-transform: translatey(0px); }     30% { opacity: 0; -moz-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes vertical{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: rotatex(180deg); }     10% { opacity: 1; -webkit-transform: translatey(0px); }     25% { opacity: 1; -webkit-transform: translatey(0px); }     30% { opacity: 0; -webkit-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes vertical{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotatex(180deg); }     10% { opacity: 1; -ms-transform: translatey(0px); }     25% { opacity: 1; -ms-transform: translatey(0px); }     30% { opacity: 0; -ms-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*horizontal flip*/ .horizontalflip{     display: inline;     text-indent: 8px; } .horizontalflip span{     animation: horizontal 12.5s linear infinite 0s;     -ms-animation: horizontal 12.5s linear infinite 0s;     -webkit-animation: horizontal 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .horizontalflip span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .horizontalflip span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .horizontalflip span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .horizontalflip span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*horizontal flip animation*/ @-moz-keyframes horizontal{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotatey(180deg); }     10% { opacity: 1; -moz-transform: translatex(0px); }     25% { opacity: 1; -moz-transform: translatex(0px); }     30% { opacity: 0; -moz-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes horizontal{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: rotatey(180deg); }     10% { opacity: 1; -webkit-transform: translatex(0px); }     25% { opacity: 1; -webkit-transform: translatex(0px); }     30% { opacity: 0; -webkit-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes horizontal{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotatey(180deg); }     10% { opacity: 1; -ms-transform: translatex(0px); }     25% { opacity: 1; -ms-transform: translatex(0px); }     30% { opacity: 0; -ms-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*anticlockwise effect*/ .anticlock{     display: inline;     text-indent: 8px; } .anticlock span{     animation: anti 12.5s linear infinite 0s;     -ms-animation: anti 12.5s linear infinite 0s;     -webkit-animation: anti 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .anticlock span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .anticlock span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .anticlock span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .anticlock span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*anticlockwise effect animation*/ @-moz-keyframes anti{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotatex(180deg); }     10% { opacity: 1; -moz-transform: translatey(0px); }     25% { opacity: 1; -moz-transform: translatey(0px); }     30% { opacity: 0; -moz-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes anti{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: rotate(180deg); }     10% { opacity: 1; -webkit-transform: translatey(0px); }     25% { opacity: 1; -webkit-transform: translatey(0px); }     30% { opacity: 0; -webkit-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes anti{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotate(180deg); }     10% { opacity: 1; -ms-transform: translatey(0px); }     25% { opacity: 1; -ms-transform: translatey(0px); }     30% { opacity: 0; -ms-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*clockwise effect*/ .clockwise{     display: inline;     text-indent: 8px; } .clockwise span{     animation: clock 12.5s linear infinite 0s;     -ms-animation: clock 12.5s linear infinite 0s;     -webkit-animation: clock 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .clockwise span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .clockwise span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .clockwise span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .clockwise span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  .clockwise span:nth-child(6){     animation-delay: 11s;     -ms-animation-delay: 11s;     -webkit-animation-delay: 11s; }  /*clockwise effect animation*/ @-moz-keyframes clock{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotate(-180deg); }     10% { opacity: 1; -moz-transform: translatex(0px); }     25% { opacity: 1; -moz-transform: translatex(0px); }     30% { opacity: 0; -moz-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes clock{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: rotate(-180deg); }     10% { opacity: 1; -webkit-transform: translatex(0px); }     25% { opacity: 1; -webkit-transform: translatex(0px); }     30% { opacity: 0; -webkit-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes clock{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotate(-180deg); }     10% { opacity: 1; -ms-transform: translatex(0px); }     25% { opacity: 1; -ms-transform: translatex(0px); }     30% { opacity: 0; -ms-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*pop effect*/ .popeffect{     display: inline;     text-indent: 8px; } .popeffect span{     animation: pop 12.5s linear infinite 0s;     -ms-animation: pop 12.5s linear infinite 0s;     -webkit-animation: pop 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .popeffect span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .popeffect span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .popeffect span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .popeffect span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*pop effect animation*/ @-moz-keyframes pop{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }     10% { opacity: 1; -moz-transform: translatey(0px); }     25% { opacity: 1; -moz-transform: translatey(0px); }     30% { opacity: 0; -moz-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes pop{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}     10% { opacity: 1; -webkit-transform: translatey(0px); }     25% { opacity: 1; -webkit-transform: translatey(0px); }     30% { opacity: 0; -webkit-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes pop{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }     10% { opacity: 1; -ms-transform: translatey(0px); }     25% { opacity: 1; -ms-transform: translatey(0px); }     30% { opacity: 0; -ms-transform: translatey(0px); }     80% { opacity: 0; }     100% { opacity: 0; } }  /*push effect*/ .pusheffect{     display: inline;     text-indent: 8px; } .pusheffect span{     animation: push 12.5s linear infinite 0s;     -ms-animation: push 12.5s linear infinite 0s;     -webkit-animation: push 12.5s linear infinite 0s;     color: #00abe9;     opacity: 0;     overflow: hidden;     position: absolute; } .pusheffect span:nth-child(2){     animation-delay: 2.5s;     -ms-animation-delay: 2.5s;     -webkit-animation-delay: 2.5s; } .pusheffect span:nth-child(3){     animation-delay: 5s;     -ms-animation-delay: 5s;     -webkit-animation-delay: 5s; } .pusheffect span:nth-child(4){     animation-delay: 7.5s;     -ms-animation-delay: 7.5s;     -webkit-animation-delay: 7.5s; } .pusheffect span:nth-child(5){     animation-delay: 10s;     -ms-animation-delay: 10s;     -webkit-animation-delay: 10s; }  /*push effect animation*/ @-moz-keyframes push{     0% { opacity: 0; }     5% { opacity: 0; -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }     10% { opacity: 1; -moz-transform: translatex(0px); }     25% { opacity: 1; -moz-transform: translatex(0px); }     30% { opacity: 0; -moz-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0;} } @-webkit-keyframes push{     0% { opacity: 0; }     5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px);}         10% { opacity: 1; -webkit-transform: translatex(0px); }     25% { opacity: 1; -webkit-transform: translatex(0px); }     30% { opacity: 0; -webkit-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } @-ms-keyframes push{     0% { opacity: 0; }     5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }     10% { opacity: 1; -ms-transform: translatex(0px); }     25% { opacity: 1; -ms-transform: translatex(0px); }     30% { opacity: 0; -ms-transform: translatex(0px); }     80% { opacity: 0; }     100% { opacity: 0; } } /*footer*/ h3{     color: #fff;     font-size: 30px;     margin-top: 20px;     text-align: center; } 

you need set main elements inline.

the exception span,that needs block, able make container autoadjust.

and animations need overlapping in time.

.sentence {    display: inline-block;    verflow: hidden;    height: 2em;    vertical-align: top;  }    .sentence p {    display: inline-block;  }    .slidingvertical {    display: inline-block;    vertical-align: text-top;  }    .slidingvertical span {    display: block;    height: 30px;    margin-bottom: -30px;    overflow: hidden;  }      .slidingvertical span {    animation: elements 10s infinite linear;  }  .slidingvertical span:nth-child(1) {    animation-delay: -1s;  }  .slidingvertical span:nth-child(2) {    animation-delay: -2s;  }  .slidingvertical span:nth-child(3) {    animation-delay: -3s;  }  .slidingvertical span:nth-child(4) {    animation-delay: -4s;  }  .slidingvertical span:nth-child(5) {    animation-delay: -5s;  }  .slidingvertical span:nth-child(6) {    animation-delay: -6s;  }  .slidingvertical span:nth-child(7) {    animation-delay: -7s;  }  .slidingvertical span:nth-child(8) {    animation-delay: -8s;  }  .slidingvertical span:nth-child(9) {    animation-delay: -9s;  }  .slidingvertical span:nth-child(10) {    animation-delay: -10s;  }    @keyframes elements {     0% {       opacity: 0;       max-width: 10px;     }     5%, 10% {       opacity: 1;       max-width: 400px;     }     15%, 100% {       opacity: 0;       max-width: 10px;     }  }

<section class="wrapper">    <h2 class="sentence">janie       <div class="slidingvertical">      <span>cute</span>      <span>wild</span>      <span>amazingly cute</span>      <span>very beatiful , amazingly cute</span>      <span>beautiful</span>      <span>honest</span>      <span>cool</span>      <span>brave</span>      <span>interesting</span>      <span>local</span>      </div>      <p>girl</p>    </h2>  </section>