[csswg-drafts] [web-animations-2] Allow keyframe to specify multiple offsets

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

== [web-animations-2] Allow keyframe to specify multiple offsets ==
_From @notoriousb1t on July 21, 2016 14:21_

As an analog to CSS keyframes, I think offset should be able to be expressed as array of offsets that indicate the keyframe should be repeated at each of those offsets.  Take the following example from animate.css:

``` css
@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
     animation: shake 1000ms;
}
```

It would be compact and easy to understand to be able to code:

``` javascript
element.animate([
    { offset: [0, 1], transform: 'translate3d(0, 0, 0)' },
    { offset: [.1, .3, .5, .7, .9], transform: 'translate3d(-10px, 0, 0)' },
    { offset: [.2, .4, .6, .8], transform: 'translate3d(10px, 0, 0)' }
], { duration: 1000 });
```

And the behavior would be the same as 

``` javascript
element.animate([
    { offset: 0, transform: 'translate3d(0, 0, 0)' },
    { offset: .1, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .2, transform: 'translate3d(10px, 0, 0)' },
    { offset: .3, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .4, transform: 'translate3d(10px, 0, 0)' },
    { offset: .5, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .6, transform: 'translate3d(10px, 0, 0)' },
    { offset: .7, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .8, transform: 'translate3d(10px, 0, 0)' },
    { offset: .9, transform: 'translate3d(-10px, 0, 0)' },
    { offset: 1, transform: 'translate3d(0, 0, 0)' }
], { duration: 1000 })
```

That would allow the keyframes to be reused, and I think it would improve livability of code.


_Copied from original issue: w3c/web-animations#159_

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

Received on Tuesday, 5 December 2017 04:41:29 UTC