[csswg-drafts] [css-animations] Animations should be allowed on linear/radial gradients (#3783)

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

== [css-animations] Animations should be allowed on linear/radial gradients ==
CSS animations should explicitly allow animated `linear-gradient()` and `radial-gradient()` backgrounds.

If all `<keyframe-selector>`s of an animation yield computed background values sharing the same set of properties:
- either `linear-gradient()`, `radial-gradient`, `repeating-linear-gradient()` or `repeating-radial-gradient()`
- same number of `<color-stop>` values

Then animation should take place in the form that the `<color-stop>` values should get animated over time.

Internet Explorer and Microsoft Edge already implement this behaviour:

![Throbbers](https://user-images.githubusercontent.com/9283914/55298060-b647da80-542b-11e9-86c1-2b71086b7576.gif)

### Sample Code

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div {
        margin: 1em;
      }

      @keyframes movement1 {
        from {
          background: linear-gradient(to right, white, white 0%, #aaf 0%, white 2%, white);
        }

        25% {
          background: linear-gradient(to right, white, white 25%, #aaf 50%, white 52%, white);
        }

        50% {
          background: linear-gradient(to right, white, white 98%, #aaf 99%, white 100%, white);
        }

        75% {
          background: linear-gradient(to right, white, white 48%, #aaf 50%, white 75%, white);
        }

        to {
          background: linear-gradient(to right, white, white 0%, #aaf 1%, white 2%, white);
        }
      }

      @keyframes movement2 {
        from {
          background: radial-gradient(circle closest-side at center, #aaf, white, white);
        }

        50% {
          background: radial-gradient(circle closest-side at center, white, #aaf, white);
        }

        to {
          background: radial-gradient(circle closest-side at center, white, white, white);
        }
      }

      input[type="text"]#i1 {
        animation: 2s linear alternate infinite movement1;
        border: 1px solid silver;
        border-radius: .5ex;
      }

      input[type="text"]#i2 {
        animation: 2s linear alternate infinite movement2;
        border: 1px solid silver;
        border-radius: .5ex;
      }
    </style>
  </head>

  <body>
    <div>
      <input type="text" id="i1" />
    </div>
    <div>
      <input type="text" id="i2" />
    </div>
  </body>

</html>
```

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

Received on Monday, 1 April 2019 01:12:24 UTC