<p style="margin-bottom: 1rem;">The blue box is not animating smoothly because the CSS variable can't be animated inside @keyframes.</p>
<div class="box box-1"></div>
<div class="box box-2"></div>
.box {
  width: 50px;
  height: 50px;
  --offset: 0;
  transform: translateX(var(--offset));
  border-radius: 5px;
}

.box-1 {
  animation: moveBox 3s infinite alternate;
  margin-bottom: 1rem;
  background-color: #235ad1;
}

.box-2 {
  animation: moveBox2 3s infinite alternate;
  background-color: #23d1a8;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 200px;
  }
  100% {
    --offset: 400px;
  }
}

@keyframes moveBox2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(400px);
  }
}

body {
  padding: 1rem;
  font-family: "Arial";
}
View Compiled 
/* I got the example from this question on stackoverflow: https://stackoverflow.com/questions/54594167/why-cant-i-animate-custom-properties-aka-css-variables */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.