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

Question

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

但是通过设置初始关键帧和最后使用 vw 他们不会在中间相遇 - 因为 vw 值是相对于 div 的左侧而不是中心（我使用 vw 因为我需要这个响应）。所以，会发生什么是圆的左侧在中心相遇。

有没有人知道只使用 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%;
  }
}

Answer 2

在本例中，圆圈大小存储在root 变量--circle-size: 100px; 中。所以圆圈可以很容易地以top 和left 为中心。 animation 使用属性 left（位置）、opacity 和 transform: scale（缩放）。

setTimeout(()=>{
  document.querySelector('.circle-left').classList.add('circle__animated');
  document.querySelector('.circle-right').classList.add('circle__animated');
}, 1000);

:root{
    --circle-size: 100px;
}

.circle{
   position: absolute;
   width: var(--circle-size);
   height: var(--circle-size);
   border-radius: 50%;
   top: calc(50% - var(--circle-size)/2);
}

.circle.circle-left{
    background: red;
    left: 0;
    animation: left 2s;
    animation-fill-mode: forwards;
}

.circle.circle-right{
    background: green;
    left: calc(100% - var(--circle-size));
    animation: right 2s;
    animation-fill-mode: forwards;
}



@keyframes left {
  0% {
    left: 0;
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  60% {
    left: calc(50% - var(--circle-size)/2);
    opacity: 0.5;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  100% {
    left: calc(50% - var(--circle-size)/2);
    opacity: 0;
    transform: scale(5);
    animation-timing-function: ease-out;
  }
}

@keyframes right {
  0% {
    left: calc(100% - var(--circle-size));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  60% {
    left: calc(50% - var(--circle-size)/2);
    opacity: 0.5;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  100% {
    left: calc(50% - var(--circle-size)/2);
    opacity: 0;
    transform: scale(5);
    animation-timing-function: ease-out;
  }
}

<div style="position: absolute; top:0; left: 0; width:100vw; height:100vh; background-color:#87827E; padding: 0; margin: 0; overflow: hidden;">
    <div class="circle circle-left"></div>
    <div class="circle circle-right"></div>
</div>