body{
  margin:0;
  padding:0;
  background:#000000;
  font-family:sans-serif;
}

.box{
  width:1000px;
  height:150px;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%)
}

.box .face{
  position:absolute;
  width:500px;
  height:150px;
  font-size:6em;
  text-align:Center;
  line-height:150px;
  overflow:hidden;
}

.box .face span{
  width:100%;
  height:100%;
  display:block;
  transition: .5s;
}

.box .face.face1{
  background:#000000;
  color:#fff;
  left:0;
  transform-origin:left;
  transform:perspective(800px) rotateY(-64.03deg)
}

.box .face.face2{
  background:#000000;
  color:#fff;
  right:0;
  transform-origin:right;
  transform:perspective(800px) rotateY(64.03deg)
}

.box .face.face1 span{
  position:absolute;
  animation:animate1 10s linear infinite
}

@keyframes animate1{
  0%{left:200%}
  100%{left:-100%}
}

.box .face.face2 span{
  position:absolute;
  animation:animate2 10s linear infinite
}

@keyframes animate2{
  0%{left:100%}
  100%{left:-200%}
}