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）。确保遮罩的大小和方向正确以显示动画。我的问题是，当我的波浪需要在上边缘时，它在面具的下边缘。

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

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

1 个答案: