如何防止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开发者网络:

目标将保留由执行期间遇到的最后一个关键帧设置的计算值.遇到的最后一个关键取决于价值animation-direction和animation-iteration-count

Demo