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

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

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>

Leave a Reply

Your email address will not be published. Required fields are marked *