W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
  height: 200px;
  width: 200px;
  margin: auto;
  border: 1px solid black;
}

#DIV2 {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: coral;
  translate: 0 0;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  50% {translate: -30px 50px;}
}

#DIV2original {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px dashed grey;
  background-color: lightgrey;
  opacity: 0.5;
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4638549725433695" crossorigin="anonymous"></script><script src="//www.p2hp.com/tj.js"></script></head>
<body>

<h1>Animation of translate</h1>

<p>Gradually change the translate property from "0 0" to "-30px 50px", and back:<p>
<p><b>Note: </b>The grey DIV element indicates where the DIV2 element would be without the change in translate property.</p>

</body>
</html>