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

如何解决动画两个圆圈以恰好在中间相遇

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

但是通过设置初始关键帧并最后使用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,1);
    opacity: 50%;
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(50vw,0) scale3d(2,2,1);
    opacity: 0%;
    animation-timing-function: ease-out;
  }
}

@keyframes right {
  0% {
    transform: translate3d(100vw,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

解决方法

一种技巧是首先将两个圆都定位在中心，然后动画/平移会将它们从左侧或右侧偏移。

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

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%;
  }
}

,

在此示例中，圆的大小存储在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>