html - 如何防止CSS动画回到原来的位置？

Question

因此，我的 CSS 在 3 秒后将一个 div 移动到 -40px。这样做之后，div 将移回其原始位置。这是代码:

#jsAlert {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    animation:mymove 3s;
    animation-delay: 3s;

    /*Safari and Chrome*/
    -webkit-animation: mymove 2s;
    -webkit-animation-delay: 2s;
}

@keyframes mymove {
    from {top: 0px;}
    to {top: -40px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {top: 0px;}
    to {top: -40px;}
}

如何防止 div 返回其原始位置？

Answer 1

您需要使用 animation-fill-mode值设置为 forwards

来自 Mozilla 开发者网络:

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count

Demo