Question

我必须在页面加载时创建页面过渡/动画。效果应类似于叠加层/ div从右到左跨全屏

到目前为止，我到达了它从右到左交叉并停止的点，但是我需要它从右到左移动并向左离开屏幕。

这是我到目前为止所拥有的：

<style>
@keyframes slideInFromLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.transition {

    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
}
</style>
<div class="transition"></div>

我做了一张小图以说明我想要的结果。 Div从右进来，而向左出 [blog]：https://ibb.co/yPJK7Tp“点击此处查看图片

Answer 1

您应该在-100%处完成过渡。

由于添加了一些填充，所以应该稍微增加一下值（类似-110%）

请参见以下示例：

我已经在动画中添加了forwards，以便在完成动画后最终坚持下去。

   @keyframes slideInFromLeft {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-110%);
      }
    }

    .transition {
      animation: slideInFromLeft 2s ease-out forwards ;
      background: #333;
      padding: 30px;
    }

    <div class="transition"></div>

页面加载时的页面过渡

1 个答案: