<div class="line"></div>
<div class="motion-blur"></div>
body {
  display: flex;
  width: 100vw;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

body > div {
  height: 1rem;
  width: 40vw;
  border-radius: 10rem;
  margin: 0 5vw;
}

@keyframes rotate-forever {
  to {
    transform: rotate(1turn);
  }
}

.line {
  background-color: #03A9F4;
  animation: rotate-forever 2s linear infinite;
}

.motion-blur {
  background-color: #f44336;
  animation: rotate-forever 2s linear infinite;
  motion-blur: blur;
  motion-shutter-angle: 180deg;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.