Animating fill color doesn't work in Safari

web-animations / web-animations-js

JavaScript implementation of the Web Animations API

http://web-animations.github.io

Apache License 2.0

3.77k stars 408 forks source link

Animating fill color doesn't work in Safari #202

Open alejandro-isaza opened 5 years ago

alejandro-isaza commented 5 years ago

Tried Version 12.0.2 (14606.3.4)

elem.animate({
    fill: ['#25ADFF', '#50E3C2'],
}, {
    duration: 1000,
});

traviskirton commented 5 years ago

This is still an issue.

The following works in Chrome, but not in Safari.

static rounded_1ShapeAnimation0() {
    return document.querySelector('#Timeline .rounded_1-svg').animate({
        fill: ['#00F8FF', '#0000FF'],

    }, {
        delay: 0,
        duration: 1000,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}

I've attached a zip folder with a working example that uses the code above. Timeline.zip

Does anyone have an idea on how to solve this?

jbeenie commented 4 years ago

I second this, would be lovely to have this fixed!