Как с помощью HTML/CSS перейти от одного изображения к другому с помощью анимированной маски? ⇐ Html

[Anonymous]

У меня есть два изображения на HTML-странице. Один черно-белый, другой цветной. Я хотел бы перейти от черно-белого изображения к цветному, используя собственную анимацию. Эффект, который я ищу, заключается в том, что изображение выглядит черно-белым, а затем кажется, что оно «окрашено» в цвет, штрих за штрихом.

Самый простой способ, который я могу придумать, — это создать анимированный gif, который начинается с белого цвета и окрашивается в черный цвет, штрих за штрихом. Затем я мог бы поместить цветное изображение поверх черно-белого изображения, используя абсолютное позиционирование, и замаскировать цветное изображение анимированным gif.

Однако, прежде чем заняться этим, я поискал повсюду, чтобы узнать, делал ли кто-нибудь когда-нибудь что-то подобное, и мне не удалось найти никаких примеров. Возможно ли это вообще, и можете ли вы показать это на примере?

Или есть ли лучший способ добиться такого эффекта?