Why

Professional polish of motion graphics often includes the application of motion blur. In most cases, it's a boolean toggled at the layer level, that then tells the engine to set a blur amount based on the speed of the pixels. This effect makes animations much closer to real life, among other nice benefits. CSS currently is incapable of such an effect. Instead, a strobing, ghosted type effect is often what we get instead.

Motion blur, as is found in motion graphic tooling like After Effects, is not possible with current filters because each pixel is evaluated, not the entire layer. Each pixel is evaluated for velocity and blurred contextually. CSS blur() can only apply to the entire layer.

Use Cases / Contexts/ Value Props

• Brand fidelity
  • Broadcast industry
  • Animation industry
  • Release dependency on movie files for fidelity
• Tooling
  • Animation tooling (framer, marvel, etc)
  • Web video editing (caption animations, etc)
• Strobing pacification/correction
  • Lower framerate scenarios can be less janky
  • Closer to the physical world
  • Soften an animation
• Classic animation technique enablement
  • Taught in schools as a healthy technique
  • Enable animators and mographers to port more of their work to the web
• Fluid interfaces
  • All the above can help lead to more fluid interfaces
  • Will be very interesting to see motion blur paired with 2d transforms and touch interactions, especially if they have physics

Example (cylindrical motion)

No motion blur (pardon 15fps gif quality..)

With motion blur

note: edges have more blur than the center because they have more speed/movement per frame

Strobing effect found on the web today: Codepen

Proposal

.animated-layer {
  /* gpu accelerated animation */
  animation: rotate .5s linear infinite;

  /* request motion blur from the engine */
  motion-rendering: blur; /* inherit | initial | auto | none | blur */

  /* nice-to-have shutter angle, controls blur amount/intensity */
  motion-shutter-angle: 180deg; /* inherit | initial | auto = 180deg | [0deg, ..., 720deg] */
}

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

• default value is none
• in some cases it will create no effect (not enough speed, etc)