Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

This repository’s issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Bug

Bug Report

An application that uses the tdToggle directive is throwing the following error:

SomeForm.html:57 ERROR DOMException: Failed to execute ‘animate’ on ‘Element’: Partial keyframes are not supported. at WebAnimationsPlayer.webpackJsonp…/node_modules/@angular/animations/@angular/animations/browser.es5.js.WebAnimationsPlayer._triggerWebAnimation (http://localhost:4200/vendor.bundle.js:8940:35) at WebAnimationsPlayer.webpackJsonp…/node_modules/@angular/animations/@angular/animations/browser.es5.js.WebAnimationsPlayer._buildPlayer (http://localhost:4200/vendor.bundle.js:8914:29) at WebAnimationsPlayer.webpackJsonp…/node_modules/@angular/animations/@angular/animations/browser.es5.js.WebAnimationsPlayer.play (http://localhost:4200/vendor.bundle.js:8969:14) at TimelineAnimationEngine.webpackJsonp…/node_modules/@angular/animations/@angular/animations/browser.es5.js.TimelineAnimationEngine.command (http://localhost:4200/vendor.bundle.js:7115:24) at InjectableAnimationEngine.webpackJsonp…/node_modules/@angular/animations/@angular/animations/browser.es5.js.AnimationEngine.setProperty (http://localhost:4200/vendor.bundle.js:8778:34) at AnimationRenderer.webpackJsonp…/node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js.AnimationRenderer.setProperty (http://localhost:4200/vendor.bundle.js:98641:25) at issueAnimationCommand (http://localhost:4200/vendor.bundle.js:98324:21) at RendererAnimationPlayer.webpackJsonp…/node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js.RendererAnimationPlayer._command (http://localhost:4200/vendor.bundle.js:98252:16) at RendererAnimationPlayer.webpackJsonp…/node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js.RendererAnimationPlayer.play (http://localhost:4200/vendor.bundle.js:98281:14) at TdToggleDirective.webpackJsonp…/node_modules/@covalent/core/common/animations/toggle/toggle.directive.js.TdToggleDirective.hide (http://localhost:4200/vendor.bundle.js:106807:35)

What is the expected behavior?

This happened with the latest upgrade of angular / covalent.

Which version of Angular and Material, and which browser and OS does this issue affect?

Angular 4.2.2 Material 2.0.0-beta.6 Covalent 1.0.0-beta.5-1

Did this work in previous versions of Angular / Material?

Works with: Covalent 1.0.0-beta.4 works with Angular 4.1.3/Material 2.0.0-beta.6

Please also test with the latest stable and snapshot versions.

Covalent 1.0.0-beta.4 works with Angular 4.2.2/Material 2.0.0-beta.6 - not working Covalent 1.0.0-beta.5-1 does not work with Angular 4.1.3/Material 2.0.0-beta.6 - not working

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

Issue Analytics

State:
Created 6 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

jt-helsinkicommented, Jun 16, 2017

@emoralesb05 Yes, It’s a component nested in an md-tab so it may be due to this:

angular/material2#4271

I’ve also found other instances in the application where this error happens. They are also nested inside md-tab components.

0reactions

mariohmolcommented, Nov 7, 2018

Experiecing the same with electron and ang ^6.0.9

Top Results From Across the Web

Failed to execute 'animate' on 'Element': Partial keyframes are ...

it works but an error is displayed in the console like: "Failed to execute 'animate' on 'Element': Partial keyframes are not supported." enter ......

Failed to execute 'animate' on 'Element': Partial keyframes are ...

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

Partial keyframes are not supported - JSFiddle

Error: Failed to execute 'animate' on 'Element': Partial keyframes are not ... <div ng-app="myApp"> ... <div class="container" ng-click="updateDom($event)">.

Failed to execute angular animate : Partial keyframes are not ...

ERROR DOMException : Failed to execute 'animate' on 'Element': Partial keyframes are not supported. I tried to google it without any success.

Failed To Execute 'Animate' On 'Element' - ADocLib

Failed To Execute 'Animate' On 'Element': Partial Keyframes Are Not Supported. The first of the two animations illustrates the use of partial keyframes....