动画:translatex 0值不起作用

我需要将某些DOM元素从某个位置设置为0px,但它不适用于animjs。

CSS:

.animate {
  transform: translateX(50px);
  width: 50px;
  height: 50px;
  background: #12acec;
  border-radius: 50%;
}

这里是JS:

anime({
  targets: '.animate',
  translateX: 0,
  duration: 300
})

如果检查元素,我会看到元素立即设置为translatex(0px)( fiddle 1 )。

但如果我使用的值不同于0,它会起作用( fiddle 2 )。

是动漫虫还是我做错了? 如果是一个bug,有没有办法用动画处理translatex上的0值?

更新: 我的目标是像连续动画一样处理…

<div class="handwritting">
   <span>T</span>
   <span>e</span>
   <span>x</span>
   <span>t</span>
</div>

JS手写

anime({
  targets: '.handwritting span',
  opacity: 1,
  duration: 5000,
  delay: function (_, i) {
     return i * 100
  }
})

……但它不适用于平移,而是适用于不透明度。( fiddle 3 )

谢谢你