<div id="marquee">
    <div>
        <span>ONE LOVE ONE HEART</span>
    </div>
    <div aria-hidden="true">
        <span>ONE LOVE ONE HEART</span>
    </div>
</div>

@font-face {
  font-family: Agency;
   src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body { 
  font-family: Avenir, sans-serif;
  marging: 0;
}

#marquee { 
  margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block; 
	height: 12rem; 
	width: 20rem;
	position: relative;
}

#marquee div:first-of-type { 
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}
#marquee div { 
    font-size: 8rem;
    overflow: hidden;
}
#marquee div span { 
    position: absolute; 
    width: 400%;    
    line-height: 1.4;
}
#marquee div:first-of-type span {
    transform: translateX(40rem);
    animation: leftcrawl 14s linear infinite;
    text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#marquee div:last-of-type span {
    transform: translateX(20rem);
    animation: rightcrawl 14s linear infinite;
}

@keyframes leftcrawl {
	to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
	to { transform: translateX(-130rem); }
}