.motionblur
  .box

$size: 100px;
$speed: 1.5s;
$color: rgb(random(200), random(200), random(200));

body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.motionblur {
  position: relative;
  width: $size * 3;
  height: $size;
  animation: slide $speed cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate;
}

.box {
  position: absolute;
  left: calc(50% - #{$size / 2});
  width: $size;
  height: 100%;
  background: $color;
  animation: slide $speed cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate;
  
  &::before {
    content: '';
    position: absolute;
    width: $size * 2;
    height: 100%;
    background: linear-gradient(90deg, rgba($color, 0.5) 50%, rgba($color, 0) 100%);
    transform-origin: 0 0;
    animation: scale $speed * 2 cubic-bezier(0.445, 0.050, 0.550, 0.950) -$speed infinite;
  }
  
  &::after {
    content: '';
    position: absolute;
    left: -$size;
    width: $size * 2;
    height: 100%;
    background: linear-gradient(90deg, rgba($color, 0) 0%, rgba($color, 0.5) 50%);
    transform-origin: 100% 0;
    animation: scale $speed * 2 cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite;
  }
}

@keyframes scale {
  0% {
    transform: scale3d(0.5, 1, 1);
  }
  
  30% {
    transform: scale3d(1.3, 1, 1);
  }
  
  55% {
    transform: scale3d(0.5, 1, 1);
  }
  
  100% {
    transform: scale3d(0.5, 1, 1);
  }
}

@keyframes slide {
  0% {
    transform: translate3d(-$size * 1.5, 0, 0);
  }
  
  100% {
    transform: translate3d($size * 1.5, 0, 0);
  }
}