如何在 div 内制作对角线动画（反射），当我们在其旁边有更多 divs 时

Question

当反射从左上角移动到右下角时，我需要在 div 和 CSS 内制作动画（最好）。当我有一个像这里这样的 div 时，这是可能的：

HTML

<section></section>

CSS

@keyframes reflection {
   0% { transform: skew(-20deg) translate3d(-100%, 0, 0); }
   100% { transform: skew(-20deg) translate3d(100vw, 0, 0); }
}

section{
  background-color: lightgrey;
  width: 400px;
  height: 200px;
  display: flex;
  gap: 20px;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 192px;
    height: 100%;
    background-color:white;
    opacity: 0.4;
    filter: blur(4px);
    z-index: 997;
    animation-name: reflection;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

https://jsfiddle.net/Larwa/17f3mo8j/33/

问题是当我有 3 个 div 彼此相邻时，我想只在第二个（绿色）中放这个动画：

HTML

<div>
<section></section>
<section></section>
<section></section>
</div>

CSS

@keyframes reflection {
   0% { left: 0; }
   100% { left: 100%; }
}

div {
  position: relative;
  background-color: grey;
  width: 400px;
  height: 200px;
  display: flex;
  gap: 20px;
}

section:nth-child(1) {
  background-color:blue;
  flex: 1;
}
section:nth-child(2) {
  background-color: green;
  flex: 2;
}

section:nth-child(3) {
  background-color: red;
  flex: 3;
}

section:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: skew(-20deg);
    width: 100px;
    height: 100%;
    background-color:white;
    opacity: 0.4;
    filter: blur(4px);
    z-index: 997;
    animation-name: reflection;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

https://jsfiddle.net/Larwa/utz43ax5/9/

但它走出去，影响到其他版块。更糟糕的是，我不知道这些部分的大小。你知道怎么做吗？有可能吗？

Answer 1

尝试仅将动画应用于相关元素，然后防止那里溢出：

@keyframes reflection {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

div {
  position: relative;
  background-color: grey;
  width: 400px;
  height: 200px;
  display: flex;
  gap: 20px;
}

section:nth-child(1) {
  background-color: blue;
  flex: 1;
}

section:nth-child(2) {
  background-color: green;
  flex: 2;
  overflow: hidden;
  position: relative;
}

section:nth-child(3) {
  background-color: red;
  flex: 3;
}

section:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: skew(-20deg);
  width: 100px;
  height: 100%;
  background-color: white;
  opacity: 0.4;
  filter: blur(4px);
  z-index: 997;
  animation-name: reflection;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

如何在 div 内制作对角线动画（反射），当我们在其旁边有更多 divs 时

How to make diagonal animation (reflex) inside div when we have more divs inside next to itself

javascript

css

animation

css-transforms

css-animations