Logo Left-to-Right Animation With CSS instead of JQuery

for http://stackoverflow.com/questions/38526453/jquery-animation-swipe

HTML

<div id="logo" class="demoStyle">LOGO</div>

CSS

#logo {
  position: absolute;
  top: 0;
  //left: 0%;
  //transform: translateX(100%);
  -webkit-animation: slide 1.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 1.5s forwards;
  animation-delay: 0.5s;
}

.demoStyle {
  line-height: 50px;
  display: block;
  background: yellow;
  width: 3em;
  height: 50px;
}

@-webkit-keyframes slide {
  100% {
    //left: 0%;
    transform: translateX(0vw);
  }
  75% {
    //left: 100%;
    transform: translateX(100vw);
  }
  50% {
    //left: 0
    transform: translateX(0vw);
  }
  25% {
    //left: 100%;
    transform: translateX(100vw);
  }
  0% {
    //left: 0%
    transform: translateX(100vw);
  }
}

@keyframes slide {
   100% {
    //left: 0%;
    transform: translateX(0vw);
  }
  75% {
    //left: 100%;
    transform: translateX(100vw);
  }
  50% {
    //left: 0
    transform: translateX(0vw);
  }
  25% {
    //left: 100%;
    transform: translateX(100vw);
  }
  0% {
    //left: 0%
    transform: translateX(100vw);
  }
}

JavaScript

//var left = $('#logo').offset().left;
//$("#logo").css({left:left}).animate({"left":"0px"}, "slow");