I'm trying to animate the discrete [-webkit-]mask-image property, as shown below. The left image is animated with CSS3 properties which works in Chrome, Safari and Firefox. The center image is animated via the Web Animations API which works in Safari and Firefox, but not Chrome despite trying many variations of the camel-cased vendor prefixed property.
Is this just a bug or is there some other naming convention I'm missing?
Possibly related to Do I include vendor prefixes when animating with WAAPI animate()?
<html>
<h1>Web animations API with vendor prefixed properties</h1>
<style>
img {
margin: 0 50px;
width: 300px;
height: 300px;
}
.mask {
-webkit-mask-position: 50px 50px;
mask-position: 50px 50px;
-webkit-mask-size: 200px 200px;
mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask-css {
animation: mask_frames 1s infinite;
}
@keyframes mask_frames {
0% {
-webkit-mask-image: none;
mask-image: none
}
100% {
-webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
}
}
</style>
<!-- CSS3 animation -->
<div class='container'>
<img class="mask mask-css" src="https://services.google.com/fh/files/misc/color_grey.jpg">
<!-- JS animation, doesn't work in Chrome -->
<img class="mask mask-js" src="https://services.google.com/fh/files/misc/color_grey.jpg">
<!-- No animation for refernce -->
<img class="no-mask" src="https://services.google.com/fh/files/misc/color_grey.jpg">
</div>
<script>
let elt = document.getElementsByClassName('mask-js')[0],
url = 'url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg)';
// works in Safari and Firefox but not Chrome
elt.animate([
{
'-webkit-mask-image': 'none',
webkitMaskImage: 'none',
webKitMaskImage: 'none',
WebKitMaskImage: 'none',
WebkitMaskImage: 'none',
CSSPropertyWebkitMaskImage: 'none',
maskImage: 'none',
},
{
'-webkit-mask-image': url,
webkitMaskImage: url,
webKitMaskImage: url,
WebKitMaskImage: url,
WebkitMaskImage: url,
CSSPropertyWebkitMaskImage: url,
maskImage: url,
},
],
{duration: 1000, iterations: Infinity}
);
</script>
</html>