Stack Overflow
Stack Overflow

Questions tagged [web-animations-api]

26 questions
2
votes
1 answer

stack/add/composite/accumulate multiple transform=translate animations in the Web Animation API

I have been running around in circles I use the Web Animation API transform:translate() to make my player run around the bases. runto("first").then(() => runto("second")); does the correct animation, but then deletes the first/previous translate to…
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
2
votes
1 answer

Do I include vendor prefixes when animating with WAAPI animate()?

Do I have to also include vendor prefixes for transform? Or is it handled automatically? If I have to include vendor prefixes for the animation how do I do it? This is my current code: document.querySelector('.ball').animate({ transform:…
Brian Hinkle
  • 41
  • 4
2
votes
0 answers

web animations api, resetting 1st animation at end of chain

I'm experimenting with the web animations API for the first time, and trying to chain some values together. I'm a little confused as for this simple animation, where it will translate 200px along the X axis, then 200px down along the Y axis once the…
joshuaaron
  • 810
  • 1
  • 15
  • 27
1
vote
1 answer

Web Animations API - does negative playback rate impact iterations?

I'm following along with MDN's Web Animations API docs here (full pen here) and I'm running into the following: I notice that the 'scenery' animations finish despite being created as follows: const sceneryKeyframes = [ { transform:…
Aaron Parisi
  • 464
  • 7
  • 15
1
vote
2 answers

Would 'will-change' applied via the Web Animations API have the desired effect?

According to Google: The general rule of thumb is that if the animation might be triggered in the next 200ms [...] then having will-change on animating elements is a good idea. For most cases, then, any element in your app’s current view that you…
Slbox
  • 10,957
  • 15
  • 54
  • 106
1
vote
1 answer

How to override a CSS class @keyframes property in html

I have a CSS class used for drawing a leaflet.js marker. Using Javascript and a razor page form, the user designs the appearence of the marker during its creation of which one of the parameters is what the color the marker will glow with when set to…
OJB1
  • 2,245
  • 5
  • 31
  • 63
1
vote
1 answer

How to animate "from" in Web Animation API

Web Animation API supports keyframe animation, so you can go "from" and "to": // Go from 0 to 300px someElement.animate( [ { transform: 'translateY(0)' }, { transform: 'translateY(300px)' } ], { duration: 1000 }); Is there some way to go…
Marvin3
  • 5,741
  • 8
  • 37
  • 45
1
vote
2 answers

Read style information from JavaScript Web Animations API, mid state

Given a web animation, such as the one over here: https://codepen.io/arxpoetica/pen/aXqEwe How do I get CSS or style information based on state between keyframes at any given point and time? Sample code: