mouseover effect not working

[danidls99]

Hi! So I've been trying to figure this out and I can't put my finger on it. I'm trying to add a mouseover effect so that when you hover over the shapes, they roll over to the other side of the page so I coded it as so:

.shape-interaction {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

and then in my javascript file I have it like so:

for (var i =0; i<100; i++) {

var layer1 = document.createElement('div');

layer1.classList.add('layer1');

if (i % 23 == 0) {
    layer1.classList.add('layer1');
}

var duration = randomNumber (1000,5000);
console.log(duration); 

layer1.style.animationDuration = duration + 'ms';

var container = document.querySelector('.content');

container.append(layer1);

}

var layer1 = document.querySelectorAll('.layer1');

layer1.forEach(function(layer1,i) {
  layer1.addEventListener('mouseover', function(event) {

    if (layer1.classList.contains('shape-interaction')) {

    }else {
      layer1.classList.add('shape-interaction');

    }

    layer1.classList.add('shape-interaction');
  });
});

I checked the validator and the console and there doesn't seem to be anything wrong so I'm not sure what I'm doing wrong. All my shapes are there and they are animated the way I want, but it's just the mouseover effect that is not working.