html - 动画两个圆圈恰好在中间相遇

Question

所以我的目标是让两个圆圈从屏幕的两侧相遇并在中间相遇以执行动画的后半部分(缩放和不透明度变化)。

但是通过设置初始关键帧并最后使用 vw 它们不会在中间相遇 - 因为 vw 值是相对于 div 的左侧而不是中心(我已经使用 vw 因为我需要它是 react 灵敏)。因此，圆的左侧会在中心相交。

有谁知道只使用 css 解决这个问题的简单方法吗？我是编码新手，所以如果答案显而易见，我深表歉意。

这是我的代码:

@keyframes left {
  0% {
    transform: translate3d(0vw, 50%, 0) scale3d(1, 1, 1);
    opacity: 50%;
    animation-timing-function: ease-in;
  }
  60% {
    transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
    opacity: 50%;
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
    opacity: 0%;
    animation-timing-function: ease-out;
  }
}

@keyframes right {
  0% {
    transform: translate3d(100vw, 50%, 0) scale3d(1, 1, 1);
    opacity: 50%;
    animation-timing-function: ease-in;
  }
  60% {
    transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
    opacity: 50%;
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
    opacity: 0%;
    animation-timing-function: ease-out;
  }
}

.circleleft {
  overflow: hidden;
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 500px;
  height: 500px;
  animation: left 2s;
  animation-fill-mode: forwards;
}

.circleright {
  overflow: hidden;
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 500px;
  height: 500px;
  animation: right 2s;
  animation-fill-mode: forwards;
}

<div style="width:100vw; height:100vh; background-color:#87827E">
  <div class="circleleft"></div>
  <div class="circleright"></div>
</div>

您也可以在这里看到它的使用:https://ruairimadine.co.uk/sudoroux

Answer 1

一个技巧是最初将两个圆圈放在中心，动画/平移会将它们从左侧或右侧偏移。

我优化了代码以仅使用伪元素并使其更易于理解:

body {
  margin: 0;
  height: 100vh;
  background-color: #87827E;  
  overflow: hidden;
  position:relative;
}
body::before,
body::after{
  content:"";
  position: absolute;
  top: calc(50% - 25vmin);
  left:calc(50% - 25vmin);
  background: white;
  opacity: 50%;
  border-radius: 50%;
  width: 50vmin;
  height: 50vmin;
  animation: move 2s forwards;
}
/* 50vw : half the screen width | 25vmin half the circle width*/
body::before { transform:translateX(calc( 50vw + 25vmin)); }
body::after  { transform:translateX(calc(-50vw - 25vmin)); }

@keyframes move {
  60% {
    transform: translateX(0) scale(1);
    opacity: 50%;
  }
  100% {
    transform: translateX(0) scale(2);
    opacity: 0%;
  }
}