Transition CSS3不适用于safari和chrome，但适用于firefox

我无法在safari和chrome上实现转换功能

我有一个带有关键帧背景图像移动的悬停动画，我为鼠标应用了一种效果，在firefox上效果很好，但在safari和chrome上不起作用，使用webkit不会改变任何东西

但是这种转换在safari和chrome上不起作用

对于鼠标悬停，我写了以下内容：

.fabanim_to_right_from_left_new_object_appears_1 .object-moved {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.fabanim_to_right_from_left_new_object_appears_1:hover .object-moved {
    -webkit-animation: toRightFromLeftNewObjectAppears 0.3s forwards;
    -moz-animation: toRightFromLeftNewObjectAppears 0.3s forwards;
    animation: toRightFromLeftNewObjectAppears 0.3s forwards;
}

这就是我的关键帧：

@-webkit-keyframes toRightFromLeftNewObjectAppears {
 49% {
 -webkit-transform: translate(100%);
 background-position:right;
}
 50% {
 opacity: 0;
 -webkit-transform: translate(-100%);
 background-position:left;
}
 100% {
 opacity: 1;
 -webkit-transform: translate(0);
 background-position:left;
}
}

我也有测试毫秒，但这不适合我：

我做得不好的是什么

您可以在此处看到一个示例：

请帮忙

多谢各位