Css 在特性设置动画后对其进行转换

我有一个元素，当它被添加到页面时（从一个XHR调用）从左边进入：

但是我想在悬停时设置

左边距

属性的动画：

.element_im_animating.animation_done {
    margin-left: 0;
    transition: margin-left .4s ease;
}

.element_im_animating.mod.animation_done:hover {
    margin-left: 10px;
}

要完成此操作，我将在动画完成后添加一个类：

$(document).on("animationend webkitAnimationEnd", function(e) {
    $(e.target).addClass("animation_done");
});

---

奇怪的是，添加

动画\u done

会在动画结束后第二次触发

飞入

动画。我能阻止这种事情发生吗？有没有更简单的无javascript方法来完成我需要做的事情？谢谢

动画不会再次运行

实际情况如下：

元素的边距设置如下所示：

.flyin:not(.animation_done) {
    margin-left: -210px;
}

由于这个原因，动画的结尾有一个0像素的左边距

.flyin:not(.animation_done) {
    -webkit-animation: flyin 5s ease forwards;
}

@-webkit-keyframes flyin {
    to { 
        margin-left: 0px;
    }
}

删除动画时，不再应用上面的向前规则，边距现在是默认值（-210px）。由于此属性已转换（未设置动画！），因此它将移动到新值：

.animation_done {
    margin-left: 0px;
}

以类似于动画的方式。解决此问题，将基本边距设置为最终边距，而不使用远期边距

.animation_done {
    margin-left: 0px;
}

.flyin:not(.animation_done) {
    -webkit-animation: flyin 5s ease;

    margin-left: 0px;
    opacity: 0;
}

@-webkit-keyframes flyin {
    from { 
        margin-left: -210px;
        opacity: 1;
    }
    to { 
        margin-left: 0px;
        opacity: 1;
    }
}

.animation_done {
    margin-left: 0px;
    transition: margin-left 4s ease;
}

.animation_done:hover {
    margin-left: 10px;
}