我想在图像上应用一个过滤器，从左到右从灰色过渡到彩色。目前，我只对所有图像同时应用了滤镜。
使用css有可能吗？
这是一个小小的复制
开始
.img {
width: 340px;
display: block;
}
.filter {
position: relative;
display: inline-block;
overflow: hidden;
}
.filter:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
animation: from_left 1s ease-in-out forwards;
animation-delay: 1s;
mix-blend-mode: color;
background: linear-gradient(gray, gray);
}
@keyframes from_left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div class='filter'>
<img class='img' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg' alt='Bridge'>
</div>
</body>
</html>