#motion-demo {
  offset-path: path('M -70 0 L -70 1000');  /*v? du?ng path theo chi?u d?c d? object ch?y theo */
  
  animation: move 3000ms infinite alternate ease-in-out; /* ho?t c?nh di?n ra trong 3s và l?p l?i liên t?c theo gia t?c */
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid red;
  margin: 0px auto -100px auto; /* trên ph?i duoi trai*/
  transform: rotate(-90deg);
}

@media only screen and (min-width: 768px) and (max-width: 1280px) { /* khi kích thu?c màn hình t? 768 pixel d?n 1280 px thì path lùi qua trái*/
  #motion-demo {
  offset-path: path('M -250 0 L -250 1000');  /*v? du?ng path theo chi?u d?c d? object ch?y theo */
  
  animation: move 3000ms infinite alternate ease-in-out; /* ho?t c?nh di?n ra trong 3s và l?p l?i liên t?c theo gia t?c */
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid red;
  margin: 0px auto -100px auto; /* trên ph?i duoi trai*/
  transform: rotate(-90deg);
}
}

#motion-demo img {
  width: 100%;
  height: 100%;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}