按顺序做动画 | CSS 动画

Question

谁能告诉我如何制作一个 div 来制作两个动画，但是第二个 div 应该只在第一个完成后才出现？

.CodeMode {
     z-index: 1;
    position: absolute;
    animation: MoveTop 2s, FullScreen 3s;
}
@keyframes MoveTop {
    from {top: 90%;}
    to {top: 0%;}            
}
@keyframes FullScreen {
    from {height: 10vh;}
    to {height: 100vh;}
}

我希望它如何工作的示例： MoveTop --> 等待动画结束 --> FullScreen

Answer 1

为您的第二个动画添加延迟，这是 animation 属性中动画名称后的第三个值。

根据 MDN:

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

要在您的代码中应用它：

.CodeMode {
    z-index: 1;
    position: absolute;
    animation: MoveTop 2s, FullScreen 3s linear 2s;
}

按顺序做动画 | CSS 动画

do animations in order | CSS animation

css

css-animations