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

问题描述 投票:0回答:1

我在给遮罩的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);

        }
    }

谢谢。

css css-animations
1个回答
0
投票

对于任何有问题的人,他们非常确定自己的代码正确无误,但其蒙版上的动画无法提供预期的结果;确保

1)。口罩覆盖正确的部分。黑色显示,透明隐藏。2)。确保遮罩的大小和方向正确以显示动画。我的问题是,当我的波浪需要在面罩的顶部边缘时,它就在面罩的底部边缘。

这为我解决了这个问题...我可以通过为容器提供背景色并设置宽度,高度和位置来看到此问题。

© www.soinside.com 2019 - 2024. All rights reserved.