要在Dojo中做到这一点，您必须使用dojo/_base/fx来动画化right属性。然而，您不能在单个动画中这样做，因为定义了多个关键帧。因此，您必须在以下情况下将其拆分（如果您希望它类似于给定的Codepen）：

0%  0
20% 0
40% -30
50% 0
60% -15
80% 0

因此，我们需要4个独立的动画，从20%到40%，从40%到50%，从50%到60%和从60%到80%。
使用dojo/_base/fx，您可以创建如下内容：

function frame40(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 30
            }
        },
        delay: 800,
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame50(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 30,
                end: 0
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame60(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 15
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame80(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 15,
                end: 0
            }
        },
        duration: 400,
        easing: easing.quadInOut
    });
}

在本例中，我为给定的duration动画right属性。持续时间基于关键帧百分比 * 总动画（Codepen中的2s）。
我还使用dojo/fx/easing添加了一个easing属性，因为否则它只是一个线性动画，对我来说感觉不自然。
要调用动画，我们需要创建两个事件监听器，一个mouseenter监听器和一个mouseleave监听器。在mouseenter监听器中，我们必须链接动画并播放它。要链接它们，您可以使用dojo/fx::chain()函数。但是，这只会播放动画一次。要无限地运行它，我们使用setInterval()函数每2秒重复一次动画：

var interval, anim;
query(".arrow").on("mouseenter", function() {
    var node = this;
    var keyframes = function() {
        anim = coreFx.chain([
            frame40(node),
            frame50(node),
            frame60(node),
            frame80(node)
        ]).play();
    };
    interval = setInterval(keyframes, 2000);
    keyframes();
});

现在，在mouseleave事件处理程序中，我们必须清除间隔，如果动画正在播放，我们必须停止动画。然而，停止动画可能会导致箭头停在“半空中”，所以我们必须正确地将其放回右侧，您也可以对动画执行此操作：

query(".arrow").on("mouseleave", function() {
    if (interval != null) {
        clearInterval(interval);
    }
    if (anim != null) {
        anim.stop();
        fx.animateProperty({
            node: this,
            properties: {
                right: 0
            },
            duration: 200,
            easing: easing.quadInOut
        }).play();
    }
});

这应该就是全部内容了，您可以查看JSFiddle上的完整示例：http://jsfiddle.net/ro55btas/