.magictime {
    -webkit-animation-duration: .5s;
            animation-duration: .5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.slideLeft {
    -webkit-animation-name: slideLeft;
            animation-name: slideLeft;
  }
  @-webkit-keyframes slideLeft {
    0% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
  
    100% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  @keyframes slideLeft {
    0% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
  
    100% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  .slideLeftReturn {
    -webkit-animation-name: slideLeftReturn;
            animation-name: slideLeftReturn;
  }
  @-webkit-keyframes slideLeftReturn {
    0% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  
    100% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
  }
  @keyframes slideLeftReturn {
    0% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  
    100% {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translateX(0%);
            transform: translateX(0%);
    }
  }