在手机/平板电脑上保持定位（响应式）答案

【问题标题】：Maintaining positioning on mobile/tablet (Responsive)在手机/平板电脑上保持定位（响应式）
【发布时间】：2019-08-03 12:00:40
【问题描述】：

我在 3 个盒子 (Flexbox) 上有一个 CSS 动画，它们使用变换从屏幕外过渡到原位，但是每当我调整窗口大小时，这些盒子就会彼此分开并远离它们的预期位置（它们应该是重叠）。如何使这些盒子保持原位？或者，如果这是不可能的，我怎样才能删除变换以将它们返回到保持在一行内但扩展屏幕的整个宽度？

index.scss

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container > div {
  width: 30vw;
  height: 80vh;
  box-sizing: border-box;
  border: solid 2px black;
  &:nth-child(1) {
    animation-name: scrollinRight;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: red;
  }
  &:nth-child(2) {
    animation-name: scrollinTop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: rgb(120, 107, 133);
    z-index: 2;
  }

  &:nth-child(3) {
    animation-name: scrollinLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: green;
  }
}

@keyframes scrollinRight {
  0% {
    transform: translateX(-100vh);
  }
  100% {
    transform: translateX(100vh);
  }
}

@keyframes scrollinLeft {
  0% {
    transform: translate(100vh, 100vh);
  }
  100% {
    transform: translate(-100vh, 10%);
  }
}

@keyframes scrollinTop {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(5%);
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

【问题讨论】：

标签： css sass flexbox css-animations

【解决方案1】：

您可以尝试在关键帧中为 translateX 使用百分比

DEMO

@keyframes scrollinRight {
  0% {
    transform: translateX(-100vh);
  }
  100% {
    transform: translateX(150%);
  }
}

@keyframes scrollinLeft {
 0% {
    transform: translate(100vh, 100vh);
  }
  100% {
    transform: translate(-150%, 10%);
  }
}

【讨论】：