CSS -webkit-mask-position 只响应一个动画

Question

我在为蒙版的 x 和 y 位置设置动画时遇到了一些问题。

1) 蒙版是波浪形的，在透明背景上是黑色的。2) x 或 y 可以被动画化，只是不能一起工作

不是 100% 我做错了什么，我已经在 Stack Overflow 上搜索了解决方案，但到目前为止我还没有发现任何问题。

以下是导致问题的 css:

    #middle{
      display: block;
      -webkit-mask-image: url("waveMask3.png");
      -webkit-mask-position-x: 100px;
      -webkit-mask-position-y: var(--yPos);
      animation: waveX 3s linear forwards infinite, waveY 3s linear forwards infinite;
    }

    @keyframes waveX{
        0%{
            -webkit-mask-position-x:100px;

        }
        50%{
            -webkit-mask-position-x:-900px;

        }
        100%{
            -webkit-mask-position-x:-900px;

        }
    }
    @keyframes waveY{
        0%{
            -webkit-mask-position-y: var(--yPos);
        }
        50%{
            -webkit-mask-position-y:calc(var(--yPos) - 10px);

        }
        100%{
            -webkit-mask-position-y:calc(var(--yPos) - 10px);

        }
    }

谢谢。

Answer 1

对于任何有问题的人，他们非常确定他们的代码是正确的，但他们面具上的动画没有给出预期的结果；确保

1).面具覆盖了正确的部分。黑色显示，透明隐藏。2).确保您的 mask 大小和方向正确以显示动画。我的问题是，当我的波浪需要位于 mask 的顶部边缘时，它却位于 mask 的底部边缘。

这为我解决了这个问题...我可以通过为容器设置背景颜色并设置宽度、高度和位置来看到这一点。