将图像从灰度动画到从左到右的颜色

Question

免责声明：我不想将图片从左向右移动。我在Stack Overflow中经历了相当多的答案，所有这些都是指从左到右移动图像。

我尝试过转换并玩背景位置。我想要我的动画将灰度图像从左到右变成彩色图像。就像颜色应该从左到右出现。动画应该像图像的彩色版本，从左到右重叠灰度图像。

这是我到目前为止所做的：

['a', 'b']

codeshare.io

它所做的只是将灰度图像转换为彩色。

Answer 1

这就是罗伯特在谈论的......

JSfiddle

＆＃13;

＆＃13;

$(".effect img").each(function() {
  $this = $(this);
  imgS = $this.attr("src");

  $this.after("<div class='effect-dup'><img src='" + imgS + "' /></div>")
});

$("button").click(function() {
  $this = $(this);

  $(this).prev().addClass("cool-effect");
})

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.effect {
  position: relative;
}

.effect-dup {
  filter: grayscale(100%);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0;
  transition: width 1s ease-in-out;
}

.effect-dup.cool-effect {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
  <button>
    See cool effect
  </button>
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
  <button>
    See cool effect
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;

纯CSS＆amp; HTML ：

＆＃13;

＆＃13;

body {
  margin: 0; /*neccessary for effect*/
}

.effect {
  position: relative;
}

.effect-dup {
  filter: grayscale(100%);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0;
  animation: width 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
  <div class='effect-dup'><img src="https://placeimg.com/640/480/nature" /></div>
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
  <div class='effect-dup'>
    <img src="https://placeimg.com/640/480/tech" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;