0

This is an animation I built using smil animation elements.

Intended animation:

  1. Droplet fades in: <animate> element,
  2. then drops: <animateTransform> element.
  3. Fades out before completing translate on y axis.

This works in Firefox.

In Chrome (Version 84.0.4147.135 (Official Build) (64-bit)) this animation does not show the fade effects from the <animate> element - timeline is defined by the keyTimes and values attributes.

However it does work when defined by the keyFrames attribute, which I don' think is actually an attribute. I learned this works via typo.

The keyTimes attribute does work on the <animateTransform> element for the translate motion in Chrome.

So I have spent all of 2-3 days learning about smil animation, and maybe I am missing something here.

Any thoughts?

codepen example

wrob
  • 1
  • 1
  • Remove the spurious ; at the end of the keyTimes and values attributes. – Robert Longson Aug 26 '20 at 15:35
  • Maybe [this post](https://stackoverflow.com/questions/30965580/deprecated-smil-svg-animation-replaced-with-css-or-web-animations-effects-hover) about SMIL being deprecated in Chrome may give some insight? – Jan Stránský Aug 27 '20 at 17:46
  • Thanks @Robert Longson.. That was it! – wrob Aug 28 '20 at 23:30
  • @Jan Stránský - yes I had read about the deprecation, and the suspension of that deprecation. Thank you for your input. – wrob Aug 28 '20 at 23:31

0 Answers0