Question

在我的UI中，有一个供用户提供输入的地方。对于某些用户来说，可能很难释放UI甚至在等待他们的输入，因此为了吸引他们的注意，我有一个提示箭头。

箭头从左进入，并从左向右摆动，指向输入位置。

在用户至少提供了一次输入之后，他们不需要动画，因此我从父元素中删除了.emphasis类，从而删除了动画。

.options-block .hint-arrow {
    height: 145px;
    width: 217px; /* width of image */
    background-image: url(highlight-arrow.png);
    background-position: center;
    position: absolute;
    opacity: 1;
    transition: transform 2s ease-in-out;
    transform: translate(-165px,0);
}
.options-block.emphasis .hint-arrow {
    animation: options-emphasis 3s ease-in 0s infinite alternate;
}
@keyframes options-emphasis {
    0% {transform: translate(-92px,0);}
    100% {transform: translate(-62px,0);}
}

预期的行为：：当动画被删除时，箭头通过transition属性从当前位置滑回到其默认位置。

实际行为：箭头会恢复到默认位置。

我在这里想念什么？如何使元素向后滑动而不是向后滑动？

纯CSS解决方案是首选，尽管我确实有JS。

请注意：我不是在谈论动画，是在停止播放，我是在谈论完全删除动画-animation-fill-mode不是答案。

Answer 1

将forwards属性添加到动画选项中

animation: options-emphasis 3s ease-in 0s infinite alternate forwards;

这可以防止它回到初始起点

在删除元素的动画时，如何防止其回弹？

1 个答案: