如何让同一div的两个CSS动画按顺序执行？先完成MoveTop再运行FullScreen

要让两个CSS动画先后启动，核心是利用启动延迟参数：默认写在animation属性里的所有动画都会在元素渲染完成时以0延迟立即启动，只要给第二个动画设置和第一个动画总执行时长相等的延迟值，就能等待第一个动画完全跑完后再触发第二个动画。

代码修改方式 #

你现有代码中MoveTop动画的总执行时长为2s，只需要给FullScreen动画补上对应的启动延迟即可，修正后的完整代码如下：

.CodeMode {
     z-index: 1;
    position: absolute;
    /* 调整animation属性：给FullScreen增加2s启动延迟 */
    animation: MoveTop 2s, FullScreen 3s 2s;
}
@keyframes MoveTop {
    from {top: 90%;}
    to {top: 0%;}            
}
@keyframes FullScreen {
    from {height: 10vh;}
    to {height: 100vh;}
}

这里FullScreen 3s 2s的参数含义是：3s为该动画自身的执行时长，紧跟在后面的2s为该动画的启动延迟——浏览器会等待2秒的延迟时间过后，才正式启动这个动画，刚好衔接2s时长的MoveTop动画的结束节点。

实用注意点 #

• 延迟值需要和第一个动画的总执行时长完全匹配：如果第一个动画设置了多次迭代、反向播放等效果，要将从启动到完全结束的全部时间核算准确。比如MoveTop如果是2s时长、循环2次，总执行时间就是4s，对应的延迟值就要写4s，否则会出现动画提前或延后启动的错位问题。
• 如果两个动画衔接时出现元素状态跳变，可以搭配animation-fill-mode属性使用：给第一个动画设置forwards填充模式，让它执行结束后保持终态，避免在等待第二个动画启动的间隙，元素跳回初始样式。

带填充效果的参考写法：

.CodeMode {
    animation: 
        MoveTop 2s forwards, 
        FullScreen 3s 2s forwards;
}

内容的提问来源于stack exchange，提问作者user14992697