为什么tablesorter行CSS动画会在它进行调整时重置

Question

我使用tablesorter 2来创建一个可排序的表。由于我有一些实时数据将来自后端服务器，我想突出显示更改，所以我创建了这样的CSS动画

@keyframes highlightfade {
  from { background: #0081FF; }
  to { background: transparent; }
}

.highlight {
  animation: highlightfade 5s;
}

然后，当数据到达时，我向单元格添加一个高亮类

$(this).addClass('highlight');

还触发排序

$("table").trigger("updateCell",[this, resort, callback]);

动画和排序工作，除了之前动画单元格的所有动画都将被重置。这是演示代码

https://jsfiddle.net/r4vse9f0/1/

您可以点击“总计”列格，查看此处发生了什么。

为什么resort会为之前的动画单元重置所有动画？有没有办法避免这种情况？

更新

我刚发现jQuery.animate可以正常使用tablesorter，不知道为什么CSS方法不起作用