如何在 CSS 中向下移动剪贴蒙版？

Question

所以我在图像的 CSS 中有一个剪贴蒙版，使用 -webkit-clip-path: inset(0 0 90% 0); 和 clip-path: inset(0 0 90% 0);。我想做的是让剪贴蒙版向下移动，达到 -webkit-clip-path: inset(90% 0 0 0); 的效果， clip-path: inset(90% 0 0 0);。我如何使用 vanilla Javascript 而非 jQuery 对其进行动画处理，使其从之前的状态移动到后一种状态？

完整代码：

@font-face {
    font-family: Fraktur;
    src: url(typefaces/BreitkopfFraktur.ttf);
}

@font-face {
    font-family: Noe;
    src: url(typefaces/noe.ttf);
}

html {
    background-image: url(images/hero.jpg);
    overflow-x: hidden; 
    overflow-y: auto; 

}

body {
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

h1 {
    font-family: Fraktur;
    margin-top: 15%;
    color: white;
    font-size: 12em;
    display: inline;
}
#duotonetop {
    padding: 0 0 0 0;
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    height: auto;
    position: fixed;
    display: block;
        transform: translateY(-500px);
}

.cont {
    margin-top: 15%;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/style.css">
 
</head>

<body>
    <center>
        <div class="cont">
            <span class="js-animate" data-speed="2" data-position="top" style="transform: translate3d(0px, 0px, 0px);">
                <h1>a</h1>
            </span>
            <h1>m</h1>
            <h1>s</h1>
            <h1>t</h1>
            <h1>e</h1>
            <h1>r</h1>
            <h1>d</h1>
            <h1>a</h1>
            <h1>m</h1>
        </div>
    </center>
    <a onclick="bottomClip()"><img id="duotonetop" src="css/images/hero_duotone.png"></a>
<script>
    function bottomClip() {
    document.getElementById("duotonetop").style.clip = "inset(90% 0 0 0)";
}

function reClip() {
    document.getElementById("duotonetop").style.clip = "inset(0 0 90% 0)";
}
</script>
</body>

</html>

Answer 1

只需使用过渡，因为 clip-path 可以设置动画

function bottomClip() {
  document.getElementById("duotonetop").classList.toggle("move");
}

body {
  text-align: center;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

a {
 display:inline-block;
}

#duotonetop {
  padding: 0 0 0 0;
  clip-path: inset(0 0 90% 0);
  display: block;
  transition: 1s all;
}

#duotonetop.move {
  clip-path: inset(90% 0 0 0);
}

<a onclick="bottomClip()"><img id="duotonetop" src="https://picsum.photos/200/200?image=1067"></a>

如何在 CSS 中向下移动剪贴蒙版？

How do I move a clipping mask down in CSS?

html

javascript

css

css-animations

clip-path