Sadly I think you can’t do anything about that with the current masking implementation. Masking elements will use the alpha of the texture provided but only using 1-bit values (masked or not), fading isn’t supported.
Masks and Masking
Image Elements can be used to mask or hide elements that are descendents. To enable this feature set the mask property of an image Element to true.
If there is no texture asset assigned to an image Element used for masking the mask will be a rectangle defined by the width and height. If the image Element has a texture assigned the alpha-channel of the texture is used as the mask. Note, an image mask is 1-bit, i.e. there is no fading out of the mask using the alpha-channel of the texture.
You could disable masking and try using multiple overlapping elements in place with both textures having alpha. Much like the UI progress bar example does:
UI Images can have a custom material assigned to them (they support a Texture, Sprite, or Material). So you can just create a new material for the UI & set the Opacity Texture of that material to be the shape you want the image to be masked as, and it works very smooth.