HTML CSSResult Skip Results Iframe
EDIT ON
html,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/bg_cp.jpg');

}

.box {
  display: flex;
}

.box .inner {
  width: 800px;
  height: 200px;
  line-height: 200px;
  font-size: 4em;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  background-color:navy ;
  color:orange;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
  background-color:blue ;
  color: antiquewhite;
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 2.5s;
  left: -100%;
}

@keyframes marquee {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}