<section class="early">

<article>
   <p class="example-right">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text Your scrolling text goes here Your scrolling text goes here </p>
</article>
<article>
    <p class="example-left">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your</p>
  
   <p class="example-right">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text Your scrolling text goes here Your scrolling text goes here </p>
  
  </article>


<article>
<marquee behavior="scroll" direction="left">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here</marquee>

<marquee behavior="scroll" direction="right">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here </marquee>
</article>

  <article>
    <p class="example-left">Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your scrolling text goes here Your</p> 
  </article>
  </section>

article {
  max-width: 600px;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  min-height: 4em;
}

.example-left {
  white-space: nowrap;
  position: absolute;
  text-transform: uppercase;
}

.example-left {
  -webkit-animation: mymove 8s linear infinite; /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: mymove 8s linear infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}

@keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}


.example-right {
  white-space: nowrap;
  position: absolute;
  top:2em;
  opacity: .4;
  text-transform: uppercase;
}

.example-right {
  -webkit-animation: urmove 8s linear infinite; /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: urmove 8s linear infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}

@keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}


@keyframes early 
{ from { opacity:1; } to { opacity:0; } }

.early {
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s
}