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

Question

I need make animation when reflex is moving from top left corner to bottom right corner inside div with CSS (the best). It is possible when I have one div like here:

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/

Problem is when I have 3 divs next to each other and I want to have this animation inside only second one (green):

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/

but it goes outside and have influence on other sections. What's worse I do not know what will be sizes of this sections. Do you have any idea how do sth like that? Is it at all possible?

Answer 1

Try applying the animation only to the relevant element and then preventing overflow there:

@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>