CSS -webkit-mask-position отвечает только на одну анимацию - PullRequest
Новая
       26

CSS -webkit-mask-position отвечает только на одну анимацию

0 голосов
/ 08 ноября 2019

У меня возникли проблемы с анимацией положения маски по осям x и y.

1) Маска является волной и имеет черный цвет на прозрачном фоне. 2) Либо x, либо y можно анимировать, просто не работая вместе

Не 100%, что я делаю неправильно, я искал разрешение переполнения стека, но пока еще ничего не поднял.

Ниже приведен код, который вызывает проблему: 

    #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);

        }
    }

Спасибо.

1 Ответ

0 голосов
/ 08 ноября 2019

Для тех, у кого проблемы с уверенностью, что их код верен, но анимация на маске не дает ожидаемых результатов;убедитесь, что

1). Маски покрывают правильную часть. Черные шоу, прозрачность скрывается. 2). Убедитесь, что ваша маска имеет правильный размер и ориентацию, чтобы показать анимацию. Моя проблема заключалась в том, что моя волна была на нижнем краю моей маски, когда она должна быть на верхнем краю.

Это решило проблему для меня ... Я смог увидеть это, дав контейнеруцвет фона и установка ширины, высоты и положения.

...