CSS 动画问题

Question

我正在设计一个具有“开幕式”动画的布局（左右两个 div，向屏幕中央移动）。但是在动画的最后出现了一些错误，“关闭效果”有点前后移动。

欢迎任何帮助 :D 我刚开始学习 html 和 CSS。 :)

HTML

<body>
    <div id="left"></div>
    <div id="right"></div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: red;

}

#left {
    width: 50vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: leftwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

#right {
    width: 50vw;
    height: 100vh;
    background-color: yellow;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: rightwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

@keyframes rightwing {
    0% {right: -1000px; background-color: purple;}
    100% {right: 0; background-color: cyan;}
}

@keyframes leftwing {
    0% {left: -1000px; background-color: purple;}
    100% {left: 0; background-color: magenta;}
}

Answer 1

我通过在正文中添加 overflow: hidden 或在 #left 和 #right 选择器中将 position: absolute 更改为 fixed 来解决这个问题

* {
    margin: 0;
    padding: 0;
}

body {
    background: red;
    overflow: hidden;
}

#left {
    width: 50vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: leftwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

#right {
    width: 50vw;
    height: 100vh;
    background-color: yellow;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: rightwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

@keyframes rightwing {
    0% {right: -1000px; background-color: purple;}
    100% {right: 0; background-color: cyan;}
}

@keyframes leftwing {
    0% {left: -1000px; background-color: purple;}
    100% {left: 0; background-color: magenta;}
}

<div id="left"></div>
<div id="right"></div>

CSS 动画问题

Issues with CSS animation

css

animation