Getting error while trying Ripple animation. Uncaught NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

[tjsavage]

From @ankurvr7003 on July 16, 2015 9:18

I am trying to implement ripple and reverse-ripple animation in my application. My application is running on Polymer v1.0.

When i test this animation in separate page then it is working fine but when i am trying to test inside my application it shows javascript error

Uncaught NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

My app have header and side menu bar. And one thing i want to let you know is whole application is mixed up with polymer elements and other libraries like (Twitter Bootstrap, jQuery, etc).

Please help me short this out.
Thanks in advance

Copied from original issue: Polymer/polymer#2092

[NinoSkopac]

Same problem here.

[eterna2]

Same problem here. Any workarounds?

[TamerZorba]

Same problem here.

[Zing22]

Same problem here.

[eterna2]

Actually usually the issue is that the original element does not have an explicit size (via CSS or style), which result in the ripple lacking an initial size, which prevent any transition.

Just give the element with ripple an explicit size should solve the problem.

[classLfz]

problem solved in windows
fix the css code

#placeholder {
    width:  100%;
    height: 100%;
}
#container {
    position: absolute;
    left: 0;
}

[notwaldorf]

I think the comment in #28 (comment) is right. The problem is that your element does not have an explicit size.

[VuongTran21]

Hi @classLfz , do I need to add 2 ids "placeholder" and "container" to html file, or only add your css code to my code? Thanks!

[luchillo17]

In my case i think it's because i was using it inside a container with display: flex; style property on, which i think doesn't play very well with the animation api due to height being unknown.

[Manohar-Gunturu]

It said "Partial keyframes are not supported", which means that you are trying to change two different css properties in keyframes in a wrong way.

I faced the same issue when I am changing different css properties in a wrong way using KeyframeEffect, as shown below.

 this._effect = new KeyframeEffect(node, [
        {offset: 0.0, 'transform': 'translateX(-10%)'},
        {offset: 0.35, 'opacity': '0'},
        {offset: 0.5, 'transform': 'translateX(2%)'},
        {offset: 0.7, 'opacity': '1'},
        {offset: 0.9, 'transform': 'translateX(0.5%)'},
        {offset: 1, 'transform': 'translateX(0%)'}
      ], this.timingFromConfig(config));

later I changed it to

this._effect = new KeyframeEffect(node, [
       {offset: 0.0, 'transform': 'translateX(-1%)',opacity:0.5},
       {offset: 0.4, 'transform': 'translateX(-3%)',opacity:0},
       {offset: 0.5, 'transform': 'translateX(3%)',opacity:0.3},
       {offset: 0.6, 'transform': 'translateX(2%)',opacity:0.6},
       {offset: 0.8, 'transform': 'translateX(1%)',opacity:0.8},
       {offset: 1, 'transform': 'translateX(0%)',opacity:1}
     ], this.timingFromConfig(config));

and that worked great.

[makafsal]

Similar problem here

Unhandled Promise rejection: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. ; Zone: ; Task: Promise.then ; Value: DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.(…) Error: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
at WebAnimationsPlayer._triggerWebAnimation (http://localhost:3000/vendor.bundle.js:69228:25)
at WebAnimationsPlayer.init (http://localhost:3000/vendor.bundle.js:69215:29)
at WebAnimationsPlayer.play (http://localhost:3000/vendor.bundle.js:69252:14)
at AnimationSequencePlayer.play (http://localhost:3000/vendor.bundle.js:38728:28)
at AnimationQueue._triggerAnimations (http://localhost:3000/vendor.bundle.js:38600:24)
at http://localhost:3000/vendor.bundle.js:38585:71
at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15266:26)
at Zone.run (http://localhost:3000/polyfills.bundle.js:15150:43)
at http://localhost:3000/polyfills.bundle.js:15546:57
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15299:35)
at Zone.runTask (http://localhost:3000/polyfills.bundle.js:15188:47)
at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:15442:35)
at ZoneTask.invoke (http://localhost:3000/polyfills.bundle.js:15373:25)
at data.args.(anonymous function) (http://localhost:3000/polyfills.bundle.js:16186:25)

animations: [
    trigger('routeAnimation', [
      state('in', style({ transform: 'translateX(0)' })),
      transition('void => *', [
        style({ transform: 'translateX(-100%)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]

This is a route animation, the error is shows when the component is closing. Actually the animation is applied to the route element, so when removing this component this error is occurs, but when showing the element is plays the animation, ie., the exiting animation of the component shows this kind of error.
Please help me to solve this issue.

[rahulkumar66]

add a transition for * => * this seems to solve the issue for me, like this

    animations:[
            trigger('visibilityChanged', [
            state('true', style({transform: 'translateX(0)'})),
            state('false', style({transform: 'translateX(100%)'})),
            transition('* => *', [
                style({transform: 'translateX(-100%)'}),
                animate(100)
            ]),
        ])
    ]

`

[mantasu]

Comment #28 (comment) solved a similar issue of mine. Just make sure each animation frame (object) has every property used.