如何使用javascript函数并在单击时以3个单独的时间间隔更改图像？

场景：

• 我目前有一个背景图像是gif。作为一个很酷的过渡，我想编辑一个按钮点击图像
• 我在代码笔上发现了这个非常棒的像素化功能：
  

• 我希望用户可以点击一个按钮，并对图像进行3个阶段的像素效果
  例如；300毫秒30%像素化，600毫秒60%像素化，900毫秒90%像素化

我怎样才能做到这一点呢？
我也愿意听取关于如何创造这种效果的任何其他建议，如果有更多扭曲的效果，那就太棒了
例如，另一支钢笔有一种很酷的效果：

谢谢你看

<div class="footage">
</div>

<button class="menu1">
  <p class="">
    GO!
  </p>
</button>

.footage {
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: 2s ease-in-out;
    background-repeat: no-repeat;
    width: 100vw;
    background-image: url(https://media1.giphy.com/media/17qXCJ8dGZHjy/giphy.gif?cid=3640f6095c14c459364b487a410e8fa3);
    background-attachment: fixed;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

button {
  position: absolute;
  top: 10vh;
  left: 5vw;
}

去

.镜头{
高度：100vh；
背景尺寸：封面；
背景位置：中心；
转换：2s易进易出；
背景重复：无重复；
宽度：100vw；
背景图片：url(https://media1.giphy.com/media/17qXCJ8dGZHjy/giphy.gif?cid=3640f6095c14c459364b487a410e8fa3);
背景附件：固定；
不透明度：1；
位置：绝对位置；
顶部：0px；
左：0px；
}
钮扣{
位置：绝对位置；
顶部：10vh；
左：5vw；
}

通过使用setInterval/clearInterval

var
参考间隔=0，
持续时间=0，
clickStage=0
;      
常数
TimeLapsStep=100，//ms
时限=10000，
info#u TimeLapse=document.querySelector（“#TimeLapse>span”）
;
document.getElementById（'TimingButton'）。onclick=function（）
{
开关（点击阶段）
{
案例0：
持续时间=0；
清除间隔（参考间隔）；
ref_Interval=setInterval（TimeLapse_缩进，TimeLapsStep）；
info_TimeLapse.textContent='0ms，已开始…'；
点击stage++；
打破
案例1：
info_TimeLapse.textContent=TimeDuration.toString（）+“毫秒，第一阶段”；
点击stage++；
打破
案例2：
清除间隔（参考间隔）；
info_TimeLapse.textContent=TimeDuration.toString（）+“毫秒，第二阶段-结束”；
clickStage=0；
打破
}
}
函数TimeLapse_indent（）
{
TimeDuration+=TimeLapsStep；
如果（持续时间>时间限制）
{
清除间隔（参考间隔）；
clickStage=0；
info_TimeLapse.textContent='超出限制（'+TimeLimit.toString（）+'ms），已停止'；
}
}

延时=无
计时按钮

您不在乎任何答案吗？-为什么?-