[csswg-drafts] [css-animation] Motion Blur (#3837)

argyleink has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animation] Motion Blur ==
### 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.

### Example
**No** motion blur (pardon 15fps gif quality..)
![motion-blur_no-blur](https://user-images.githubusercontent.com/1134620/56318644-7879d000-6114-11e9-93e6-d13de4bb763b.gif)

**With** motion blur
![motion-blur_with-blur](https://user-images.githubusercontent.com/1134620/56318660-7e6fb100-6114-11e9-9369-068e0679934d.gif)

### Proposal
**I'd like to propose a way for developers to opt into motion blur on the web**. I think it should be handled by the GPU, and require little effort from the implementor. 

```css
.animated-layer {
  animation: rotate-forever 1s linear infinite;
  motion-blur: blur; /* inherit | initial | none | blur */
}

@keyframes rotate-forever {
  to {
    transform: rotate(1turn);
  }
}
```
[codepen](https://codepen.io/argyleink/pen/yrvwNm)

### Implementation Details
https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch27.html

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

### Assertions
- effect is limited to GPU accelerated animations/transitions

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3837 using your GitHub account

Received on Wednesday, 17 April 2019 20:42:22 UTC