Stack Overflow
Stack Overflow

Questions tagged [web-animations]

Web Animations defines a model for supporting animation and synchronization on the Web platform. It defines a programming interface to the model that may be implemented by user agents that provide support for scripting.

Official documentation, as published by CSS Working Group and SVG Working Group.

Github: https://github.com/w3c/csswg-drafts
IRC: ircs://irc.w3.org:6667/webanimations

98 questions
2
votes
2 answers

How to loop through a CSS Animation?

I'm learning how to do animations in CSS. I know I can set the iteration-count property to infinite and it will run indefinitely, but I want the loop to be smooth. After coming back to 0% in the keyframe the animation is not smooth and changes to…
Sai Abhi
  • 65
  • 1
  • 9
2
votes
1 answer

How do I getAnimations() on a HTML Element in Chrome?

I'm on Chrome Version 67.0.3396.99 (64-bit). Mozilla documentation on Web Animations API describes a method getAnimations() like so: document.getAnimations().forEach( function (animation) { animation.playbackRate *= .5; } ) But it doesn't…
Marvin Danig
  • 2,967
  • 5
  • 30
  • 56
2
votes
1 answer

web-animations-js giving error in IE 9 SCRIPT5007: Object expected; web-animations.min.js (15,23868)

I am using angular 5. Followed following steps: add web-animations-js as a dependency : npm install web-animations-js And uncomment the following line in polyfils.ts import 'web-animations-js'; // Run npm install --save…
Alwaysalearner
  • 3,137
  • 9
  • 45
  • 85
2
votes
3 answers

angular animation not working on production build (skips to final state without actually animating)

I have an animation, which works fine on stackblizt (https://stackblitz.com/edit/burger?file=app%2Fburger%2Fburger.component.ts) as well as locally with ng serve --aot, but it seems to be skipping straight to the final state on production build (ng…
fxck
  • 4,829
  • 7
  • 53
  • 91
2
votes
4 answers

How to detect changes made by CSS3 animation or web animations API?

How can I detect changes made by CSS3 animations or web animations (Element.animate)?? (Sorry for my bad English! this is my first question in Stackoverflow) I know about MutationObserver, it responds only if I change the inline style or if I use…
Ibrahim Al Khalil
  • 123
  • 1
  • 9
2
votes
2 answers

Use Web Animations API to expand div height 0 --> 'auto'

I'm trying to get my head around the web animations standard and their polyfill, as I saw it work nicely in the Angular animations library (you set an animation end value to '*' and this becomes 100% of the div size, but that uses a special Angular…
Simon H
  • 17,952
  • 10
  • 57
  • 101
2
votes
1 answer

Web animations API with svg element

Zhaowei
  • 271
  • 1
  • 3
  • 8
2
votes
2 answers

Polymer animation get Keyframes error

I have created a simple animation for my elements, but instead of cool effects I get Uncaught TypeError: Keyframes must be null or an array of keyframes.