html - css 没有动画计时功能

Question

如何让动画直接切换帧？必须没有像线性或其他任何时间功能。我需要帧直接在帧之间切换，而无需经过任何中间值。

例如:

0% -> top: 20px
100% -> top: 400px

应该在时间 t 内直接到达 400px，而不经过 100、200、245 或其他任何时间。

Answer 1

可以使用动画延迟:

.a{
    width: 50%;
    height: 100px;
    position: absolute;
    top: 20px;
    background-color: #1F8CCA;
    margin-top: 20px;
    
    animation:anim 0s 1;
    -webkit-animation:anim 0s 1;
    animation-fill-mode: forwards;
    
    animation-delay:2s;
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;
    
} 

@keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@-webkit-keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

<div class="a">
<div>

您可以定义多个具有不同延迟的动画。不确定这是最好的方法，但它确实有效。

.a{
    width: 50%;
    height: 100px;
    position: absolute;
    top: 20px;
    background-color: #1F8CCA;
    margin-top: 20px;
    
    animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
    -webkit-animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
    animation-fill-mode: forwards;
    
    animation-delay:1s, 2s, 3s;
    -webkit-animation-delay:1s, 2s, 3s; /* Safari and Chrome */
    
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
} 

@keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@-webkit-keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@keyframes anim-back{
    from {top: 400px;}
    to {top: 20px;}
}

@-webkit-keyframes anim-back{
    from {top: 400px;}
    to {top: 20px;}
}

<div class="a">
<div>