[web-animations-2] Allow keyframe to specify multiple offsets #2060
Description
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:
@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:
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
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